How to solve Cannot GET /users/login error on page refresh?

Support
,
1

PLEASE help us help you by writing a good post!
site name : https://tangerine-cuchufli-5eef89.netlify.app
I have deployed a reactjs appplication in Netlify and the backend nodejs in Heroku. I am getting Cannot GET/… error while refresh the page on netlify .

I have already tried including the /* /index.html 200 in the _redirects file ,but when I include it as the first rule of the file then requests for the backend didn’t work.(Gives 404). At the moment my _redirects file looks like below.

/*  https://hellow-world-e31524g40f51.herokuapp.com/:splat  200
/* /index.html 200

Here the first rule is about the proxy url.(Here I mentioned a fake url for security purposes but I have added the real one in the deployment)

How to fix this issue ?

2

That’s because of the Rule processing order, which is ‘top to bottom’:

https://docs.netlify.com/routing/redirects/#rule-processing-order

Your issue is that both of your rules target the same route of /*

So you’re rewriting all requests, for all routes, to one of those two, whichever is higher.

What you’re probably seeing is…

  • When rewriting to heroku your backend would work, but not your frontend.
  • When rewriting to your index.html your frontend will work, but not your heroku backend.

To fix change the route you use to make requests to heroku.
Ensure that it has a prefix that allows you to rewrite those routes separate from other routes.
E.g. If you make all your heroku requests start with /api/ then you can do:

/api/*  https://hellow-world-e31524g40f51.herokuapp.com/:splat  200
/* /index.html 200
3

So should I need to add a prefix to all my api requests for backend as /api ?is that the fix ?

4

You’re confirming information that I already provided?

Note that what you use for the prefix isn’t important, it’s not magic.
It’s just a way for you to ensure the rewrite rules don’t target exactly the same routes and clash.

With what you had, where both rules are /*, how could Netlify’s system possibly know which requests to send to A (Netlify) and which to send to B (Heroku).