Requested URL was not found on the server on page refresh

Support
, , ,
1

create react app frontend
render backend

my deployed site works normally, it’s able to send api requests to my backend hosted on render.
however, whenever i refresh the page or manually type the url, it shows a white screen with text: “The requested URL was not found on the server…”

image
image876×142 5.4 KB

i’ve read the following post that has a similar issue but to no avail:

i have made a netlify.toml file

[[redirects]]
  from = "/*"
  to = "https://example.onrender.com/:splat"
  status = 200

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

both redirect rules processed.
image

in my package.json i have:

"proxy": "https://example.onrender.com",
 "homepage": "https://example.netlify.apps",

i think may be that my base url for my APIs is / which conflicts with the index.html redirect?

i’m not sure if there’s an easy simple way to fix this unless i change the base url of my APIs to /api/ ?? i only want to try that as a last resort…

i have also tried a _redirects file in my /public folder instead of the netlify.toml file but still no dice

2

@ccs Your redirect rules don’t make any sense, as they both target /*

Due to the Rule processing order no path would ever be handled by the bottom one.

You should instead have something more like:

[[redirects]]
  from = "/api/*"
  to = "https://example.onrender.com/:splat"
  status = 200

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Due to how your rules currently are, the Not Found message that you’re seeing isn’t Netlify, it’s Render.

3

yea i suspected that was the case, so the only solution would be to change my api base path to be /api instead of just / ?

4

You don’t have to change it to /api but you would need to do something so that the routes that need to proxy to Render can be differentiated from the ones that should be served by Netlify.

If you have a limited number of API routes you could specify them all independently before the SPA catch-all.

Using a simple prefix like /api/ is just a common solution that lets you solve it with a single proxy rule and also know with confidence when looking at your URL’s which ones are routing to which service.

1 Like