Failed to load service: Server responded with a status of 404 error when trying to load data fetched from my railway server

Please help!

My netlify site - https://personal-budget-planner.netlify.app/ - is not pulling my data when I request it from my server hosted on Railway. I keep getting a 404 error when this happens.

I have created a redirect to the railway site in a netlify.toml that sits in the root of my client/ subdirectory (both my backend and frontend are in the same main directory).

[[redirects]]
  from = "/api/"
  to = "https://budget-planner-api.up.railway.app/:splat"
  status = 200
  force = true
  headers = {X-From = "Netlify"}

[[headers]]
  for ="/"
    [headers.values]
    Access-Control-Allow-Origin = "*"

I checked the deploy logs and the .toml file and redirect has been loaded into the dist folder on build. Ive also double checked my route paths and everything else checks out.
Heres a link to my repo if that’ll help - GitHub - HaydnMeyburgh/personal-budget-planner: A REST API to track and add budget envelopes and transactions related to envelopes

and the screenshots of the console are included as well. Please help :frowning:

Try changing the redirect to

[[redirects]]
  from = "/api/*"  # <- Note the inclusion of the wildcard here
  to = "https://budget-planner-api.up.railway.app/:splat"
  status = 200
  force = true
  headers = {X-From = "Netlify"}
1 Like

Thanks so much jasiqli, this worked!
Can you explain just so i can better understand what the wildcard is accounting for there?

As it says in the Splats documentation

An asterisk indicates a splat that will match anything that follows it.

This means anything after /api/ is appended to the URL proxied to.

For instance a call to

/api/users

is proxied to

https://budget-planner-api.up.railway.app/users

and

/api/users/some-user-id

is proxied to

https://budget-planner-api.up.railway.app/users/some-user-id
1 Like

You’re a legend, thanks so much for the help. Really appreciate it!