CORS proxy works on Netlify Dev but not when deployed

[GK-Hynes]

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.

[coelmay]

Welcome to the forums @GK-Hynes

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

Form action links to file on a third-party website, getting "Cross-Origin Request Blocked"

Hi, @akshatkedia. I see the action attribute for the form is this: https://res.cloudinary.com/makers-asylum/image/upload/v1564326086/D.I.V.E%202019%20Report.pdf For Netlify forms, the action must be a path relative to the site root. Quoting the Forms documentation: You can replace the default success message with a custom page you create by adding an action attribute to the <form> tag, entering the path of your custom page (like "/pages/success" ) as the value. The path must be relative…

CORS error when calling netlify function on redirected site

You can try defining the following headers on your request if you’re not doing it already: 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'Content-Type', 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE'

[GK-Hynes]

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?

[hillary]

Hi there, @GK-Hynes

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:

Function gives 502 error when deployed to Netlify but executes fine locally

Hi, I am in the process of deploying my new website to Netlify but having some issues with getting a function to correctly execute when deployed. Currently I get a 502 error when the function is deployed to Netlify, locally it executes fine with no errors and returns all the correct data. When I visit the URL of the function in my browser I am greeted with the below error: {“errorType”:“Runtime.UserCodeSyntaxError”,“errorMessage”:“SyntaxError: Unexpected token ‘.’”,“trace”:[“Runtime.UserCodeS…

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

[GK-Hynes]

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.

[hrishikesh]

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.

[GK-Hynes]

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.

[hillary]

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