Need help with applying redirect

I’m having issues getting redirect rules to apply. I need them to get around CORS errors of hitting an API I don’t own.
I’ve read posts on very similar problems and haven’t been able to solve it with their solutions.
A few key things that I have verified…

  • I’ve used the Netlify chatbot to review the format and structure of the netlify.toml file, all good there.
  • I can see that the redirect rules were identified during the build and deployment process on the Netlify deployment page.
  • I have done all I can think to do to verify and check that the rules I have defined line up with the url I’m using for the network call

My site is a react application, that uses axios to make the network calls.
Sitename: statuesque-profiterole-5fca6a
Currently deployed version: https://main--statuesque-profiterole-5fca6a.netlify.app/
Repo (temporarily public): https://gitlab.com/StevenBranham/honormountain
(Don’t judge my commit history too harshly, I’ve been trying to move quickly on this project)

  • Network calls originate from the bgg-list.js file
  • On the deployed app the network call is made when hitting the ‘Load’ button.

What I keep seeing is that my network call is made with my netlify base url instead of the replacement url specified in the netilify.toml file.
I’m getting: https://main--statuesque-profiterole-5fca6a.netlify.app/api/listitems
I want: https://api.geekdo.com/api/listitems
Really I want: https://api.geekdo.com/api/listitems?listid=331341&page=* (but I tried to simplify the url for troubleshooting the redirect)

Thanks in advance for any feedback!

The proxy redirect works. This is evident when you visit https://statuesque-profiterole-5fca6a.netlify.app/api/listitems?listid=331341&page=1 as results are returned as opposed to https://statuesque-profiterole-5fca6a.netlify.app/api/listitems when nothing is returned.

What you need to do is modify how you build the URL to fetch by adding the query parameters.

e.g.

const url = new URL("https://statuesque-profiterole-5fca6a.netlify.app/api/listitems")

url.searchParams.set('listid', 331341)
url.searchParams.set('page', 1)

console.log( url.toString() )

You are my hero!

I knew it was close. I had been expecting to see in the browser tools the base url swapped out, so I thought it wasn’t working.

I just added my url parameters back in the app and it’s working! Thanks for the nudge in the right direction, just what I needed!

1 Like