CORS proxy works on Netlify Dev but not when deployed

Hi folks,

I’m attempting to use a redirect to get around CORS issues when using ipify’s API (like this example in the docs).

I have my netlify.toml set up like this:

[[redirects]]
  from = "/cors-proxy/*"
  to = "https://geo.ipify.org/api/v1:splat"
  status = 200
  force = true

When I make a request to /cors-proxy/?apiKey=${apiKey} using Netlify Dev locally it works but when I deploy the app to Netlify I’m getting a 502 bad gateway.

Local:

Deployed:

The redirects rule is being applied but something is going wrong and I’m not sure where.

The deployed app is https://goofy-spence-1d3ac9.netlify.app

I’ve followed the steps in the Redirects Guide and haven’t been able to figure out where I’m going awry.

It’s always possible that I’m missing something obvious and I would be really grateful for any advice.

1 Like

Welcome to the forums @GK-Hynes

You will need to set up CORS headers. Two previous solutions on the forums you might find helpful:

Thank you very much for the suggestions, @coelmay.

I’ve tried setting various headers, including:

Access-Control-Allow-Origin = '*'
Access-Control-Allow-Headers =  'Content-Type'
Access-Control-Allow-Methods = 'GET, POST, PUT, DELETE'

Each version of the netlify.toml that I’ve tried is available at History for netlify.toml - gerhynes/ip-address-tracker · GitHub

Each time it works locally on Netlify Dev but I get a 502 once it’s deployed to Netlify.

I’ve tried making the requests via Postman and get the same results.

I’m confused that it’s working on Netlify Dev but not when deployed. Shouldn’t the same headers be applied by the netlify.toml?

Hi there, @GK-Hynes :wave:

Thanks for writing such a detailed thread here! I am not a headers expert, but here is a great thread on debugging a 502 that may be of service to you. It sounds like a similar scenario of working locally, but not once it is deployed to Netlify:

Let us know if following those steps work! If not, I can loop in our Support team as well.

1 Like

Hi @hillary, Thank you for the suggestion. I am very much not an expert when it comes to this.

I followed that user’s example and checked if it was a matter of syntax support in different Node versions and that doesn’t seem to be the source of the problem. Both the Netlify build and my local machine are running Node 16.8.0.

I had a look at the headers that are being sent and can’t see if they’re making a difference.

Headers when sent locally:

Headers when deployed:

I’ve tried the app in private windows in both Firefox (Developer Edition Version 92.0b9 64-bit) and Chrome (Official Build Version 92.0.4515.159 64-bit) to see if the browser or any extensions were interfering with things and it made no difference. It worked from localhost but not https://goofy-spence-1d3ac9.netlify.app.

The project’s repo is at GitHub - gerhynes/ip-address-tracker: An IP information app built to solve a Frontend Mentor challenge.

I’m a bit stumped where the difference between the local and deployed version is coming in.

Thanks again for your help.

Hi @GK-Hynes,

The problem is that, API docs | IP Geolocation API is not responding to the request within 30 seconds. For proxy rewrites, we close the connection in 30 seconds and since the request is not complete by then, we return a 502.

Now, I don’t have an answer as to why the API is not answering requests made through proxy. Maybe they block such requests or something? Their support can answer that.

You can try to deploy this as a Netlify Function. Hopefully, the server will respond to requests when called from within Lambda and you can then pass that data to the client. It will also help you keep your API key safe.

1 Like

Thank you very much @hrishikesh. Moving the fetch request into a serverless function did the trick and now I’m able to get a response from ipify to the deployed app.

If anyone else runs into this problem, I found Ben Hong’s Up and Running With Serverless Functions quite useful.

Thanks again @coelmay and @hillary for taking the time to look into this.

2 Likes

So glad this is working for you now, and thanks for sharing that useful resource!!

1 Like