Netlify Redirect With React

Support
1

The backend of my site works with Nodejs Express on Raspberry Pi and I access this server with https://player.afkborn.keenetic.pro/.
When I run it as localhost I successfully receive my requests using axios.

An example axios confg
const config = {
method: “get”,
url: “/api/posts/”,
};
When I throw this into netlify it doesn’t work. I am using redirect for this.

My netlify.toml file:
[[redirects]]
from = “/api/"
to = “https://player.afkborn.keenetic.pro/api/:splat”
status = 200
force = true
headers = {X-From = “Netlify”}
[[redirects]]
from = "/media/”
to = “https://player.afkborn.keenetic.pro/media/:splat”
status = 200
force = true
headers = {X-From = “Netlify”}

In this way, it works successfully, but when I enter a share, that is, when I change the URL, if I press F5 to the site, it does not work.

https://mellifluous-licorice-416bd0.netlify.app/post/635ac12d3f09f63670a018c7
For example, when I try to access this link, I can’t.

I did some more research for this and I saw that I need to create _redirects in the public folder and write “/* /index.html 200”, but when I do this, my site does not open at all and I get Redux error code 14.

2

The issue is still up to date, I couldn’t find a solution.

3

You need to add the redirect rule after the ones you’ve now, so it would be:

[[redirects]]
  force = true
  from = "/api/*"
  to = "https://player.afkborn.keenetic.pro/api/:splat"
  status = 200
  [redirect.headers]
    x-from = "Netlify"
[[redirects]]
  force = true
  from = "/media/*"
  to = "https://player.afkborn.keenetic.pro/api/:splat"
  status = 200
  [redirect.headers]
    x-from = "Netlify"
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
1 Like
4

When I set the forwarding settings like this, my site loads but the post is not loaded. I think it’s trying to load the homepage, but now that it’s in the post URL, it should load the post.

Post Page After F5

postPageAfterF5
postPageAfterF51920×1080 36.7 KB

Post Page Response

<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><title>React App</title><script defer="defer" src="/static/js/main.6117ca94.js"></script><link href="/static/css/main.a7d6c57b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
5

Post is failing because of your incorrect axios call:

image
image1254×212 40.7 KB

You need to debug hy your API is sending a 404

1 Like
6

Yes, thanks to you, I solved the error, I guess I didn’t see the error because I never tried F5 while working in localhost. It’s working fine now, thank you.

1 Like
7

Thanks for coming back and letting us know! Happy building :rocket: