Achieving client-side routing and API-forwarding in netlify.toml

Support
, ,
#1 
[[redirects]]
  from = "/api/*"
  to = "https://api.example.com/:splat"
  status = 200
  force = true 
  headers = {X-From = "Netlify"}

[[redirects]]
  from = "/*"
  to = "/"
  status = 200
  force = true 
  headers = {X-From = "Netlify"}

Our React SPA needs to have client side routing and API forwarding. The first redirect entry above is for API forwarding and the second for client side routing. Previously we achieved client side routing through public/_redirects - but that breaks API forwarding. Any advice would be greatly appreciated.

#2

Hey @mkrecny

The above netlify.toml looks correct and should work fine. Is it not working?

If the second rule here was in the _redirects file e.g.

/*   /index.html   200

then everything in the netlify.toml is ignored because _redirects is processed first.

1 Like
#3

Thank you @coelmay -

This is still not working - the deployment is https://elastic-benz-cfa922.netlify.app/

Confirming that I have removed _redirects and cleared deployment cache.

#4

What if you change the above to the following

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
1 Like
#5

Thanks @coelmay - that resolved the issue for me.

#6

That’s great @mkrecny.

My apologies, I overlooked the force = true initially—this was sending all requests, including the files/paths that do exist, back to index.html which is not desired in this instance.