Netlify _redirects file not working as expected

Question

I have my _redirects file in the public folder of my react app and I added a redirect rule /* /index.html 200, which works perfectly.

Then I added another rule to proxy my app to my api server /api/* https://api.com/ 200! it doesn't work.

the whole file looks like this

/*   /index.html  200
/api/* https://api.com/ 200!

As I stated, the global redirect /* overrules the /api/* and I couldn't get it to work.

NOTE: I have tried rearranging them like this

/api/* https://api.com/ 200!
/*   /index.html  200

and in this case, the app get's stuck on 'page not found'

Answer 1

NOTE: I have tried rearranging them like this

/api/* https://api.com/ 200!
/*   /index.html  200

and in this case, the app get's stuck on 'page not found'

You are stuck at 404 beacuse https://api.com/ handles home route as a 404 from your backend(when your url in Browser address bar is like: /api/blah/blah).

With this rule /api/* https://api.com/ 200!, the asterisk (*) on /api is used to indicate anything that follows /api/ to be matched to https://api.com/(home route).

This is a problem because what you want is https://api.com/ matched to anything that followed /api/ as well, for example;
/api/blog/2010 should be matched to https://api.com/blog/2010.
But the current behaviour is /api/blog/2010 is matched to https://api.com/

Solution

This is how your _redirect file should look like:

/api/* https://api.com/:splat 200!
/* /index.html  200

You need to specify splat.
Using an asterisk on the from URL(/api/*), you also need to indicate a splat on the to URL(https://api.com/:splat) that will map to anything that follows /api/*. So a URL like /api/blog/2010 will be written to https://api.com/blog/2010

Bonus

The Netlify redirects engine will process the first matching rule it finds, reading from top to bottom.

So an ordering like:

/* /index.html  200
/api/* https://api.com/:splat 200!

Means that the first redirect rule(/* /index.html 200) will process since it always matches. The second one(/api/* https://api.com/:splat 200!) won’t be hit it, even when browser address bar is like /api/blah/blah. Even if you have ! on a rule, the order of redirects is still followed.

More specific rules should be defined at the top. As shown:

/api/* https://api.com/:splat 200!
/* /index.html  200