Proxy redirect not working

Hi Netlify team. I came across one problem after deployment. Problem is proxy not working after deploying my React app in netlify. I am using api deployed in heroku. My heroku api is
https://domain.herokuapp.com.
So i am fetching my api like
const fetch= await axios.get(/api/users)
I have put __redirect file in public folder as

/* /index.html 200
/api/* https://domain.herokuapp.com/:splat 200

To get response my api endpoint is like this https://domain.herokuapp.com/api/users.
So what is wrong with my code? In my browser , api request are bad.
My deployed site is
https://mobyletech-admin.netlify.app

Netlify processes redirect rules from top to bottom. So, any rule that matches first is applied and the rest of the file is ignored. In your case, /* matches routes under /api/* too. Thus the problem. If you switch the order of the rules, it should work.

Thanks for reply . What if I want both to be applied? I dont understand clearly. If you give me snippets , it would be helpful

Hi @Saral,

You can’t apply multiple redirects to the same file.

So take this example:

Suppose you want 2 redirects on your website. You wish to redirect /foo/bar.png to https://www.netlify.com/ and you also need to add the SPA redirect. According to your current configuration, you’ve done this:

/* /index.html 200
/foo/bar.png https://www.netlify.com/ 301!

Notice that, /foo/bar.png matches in both cases, case 1: /* = all files in the website and case 2: /foo/bar.png = only the bar.png image. So when someone requests /foo/bar.png, the redirect engine checks for the redirect rules and finds a match /*. It applies the redirect and ignores the rest of the redirect file. So even though you have the correct redirect setup in the next line, it won’t work because the first rule matched the requested file.

However, if you had the redirects like this:

/foo/bar.png https://www.netlify.com/ 301!
/* /index.html 200

What would happen is, when someone requests /foo/bar.png, the redirect engine checks for redirect rules and find a match. It redirects to https://www.netlify.com/ and stops processing after that. So your redirect works fine.

Thus, it’s always recommended that add more-specific rules to the top and the wildcard rules to the end. So your file should look like:

/api/* https://domain.herokuapp.com/:splat 200
/* /index.html 200

Hope this helps.

1 Like

So I replaced the order like you suggested. When calling that api , I am doing like this

const res = await axios.get(`/api/users`) //Original endpoint is https://domain.herokuapp.com/api/users

But I still didnot get the response. Is way of calling my api endpoint correct or not?

If your Heroku endpoint is setup that way, the rules should be like:

/api/* https://domain.herokuapp.com/api/:splat 200
/* /index.html 200
1 Like

Thanks. It worked…
Can you help me in another problem?

Hello,

I tried to do the same for my API, which is setted in render.com, but it doesn’t work.
How do I need to set up my “_redirects” file?

:wave: @kevindev ,

Could you share your site name and the redirects you’re having trouble with?