How handle Cors error in Netlify?

Hello, I am new to using Netlify, and I was wondering how I could handle this cors error,
“Access to XMLHttpRequest at ‘https://thingproxy.freeboard.io/fetch/http://api.yelp.com/v3/events?location=EastVillage,NewYork,NY&limit=20&end_date=1565817637&sort_on=time_start&start_date=1565731237’ from origin ‘https://priceless-curie-63955d.netlify.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”

On my local folder, I had a similar error when I used just index.html, but after adding in express and an app.js, and visiting my site through localhost:3000, I didn’t have that error anymore. So I was wondering, since Netlify does static hosting, this might be part of the reason is not working?

I’ve added netlify.toml in my root directory with these settings,

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

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

"

and added a _headers file in the location of my index.html (my program is just an index.html, and connected javascript file that sends out the cors request and edits the dom after receiving data)

_headers file content:
/*
Access-Control-Allow-Origin: *

Event with both netlify.toml, and the _headers file I am still getting this error, so I am at a lost as what to do

Hi,

It looks like you’re making a request to an API without CORS support from the client (browser). You need to make sure the API you are making requests to supports CORS from your domain.

This is what my website looks like when I visit it through localhost:3000, and it’s the exact same request, so is the problem that it’s not supporting cors requests from netlify domain? Because it has no problem accepting cors requests from my browser.

I can even visit the url directly to view the data, https://i.imgur.com/JgN31yN.png

Would you be willing to try the proxy solution for API calls mentioned here?

https://www.netlify.com/docs/redirects/#proxying

Quoting:

Just like you can rewrite paths like /* to /index.html , you can also set up rules to let parts of your site proxy to external services. Let’s say you need to communicate from a Single Page App with an API on https://api.example.com that doesn’t support CORS request. The following rule will let you use /api/ from your JavaScript client:

/api/*  https://api.example.com/:splat  200

There is also this post about other possible solutions to this issue:

Please reply here if neither of those solutions will work.

2 Likes

Hi Luke,

Sorry to glom on, but I have a similar CORS issue and it may help out Juchy as well.
When I proxy my POST request through netlify, it works fine. However, the POST redirects to a GET instead of returning a response, which leads to a CORS issue on the GET request (as they don’t use the proxied end point). Any suggestions?

-Baldeagle

1 Like

Hmm, could you make the POST’ed to endpoint…not redirect? Or, redirect to a proxy’d endpoint instead? The functionality here is not likely to change but it seems like you should be able to change one of those things to have it work better :slight_smile:

Hey, I tried that and got a new error, it doesn’t look like the authorization in my original link is being sent through the redirect

And I’m not sure how to make that happen.

I have a _headers file

and tried both this:
/*
Access-Control-Allow-Origin: *

https://thingproxy.freeboard.io/*
Bearer: authorization-key-here

and

/*
Access-Control-Allow-Origin: *
Bearer: authorization-key-here

I think the problem now might be a cors error with netlify, as I can access the api from my url now if I use the browser, pic: https://i.imgur.com/aBjZMIG.png

But through a request on my index page, I get this error response, and it looks like it’s from netlify,

and this is the response:

{“this”:“failed”,“with”:401,“because”:{“message”:“unauthorized”},“id”:“up685-FRO”}

This decided to switch my redirect from a _redirect file to netlify.toml so I can set the headers, so this is what I currently have:

The following redirect is intended for use with most SPAs that handle
routing internally.
[[redirects]]
from = “/api/**”
to = “api-link/:splat”
status = 200
headers = { Access-Control-Allow-Origin = “*”, Authorization = “Bearer api-key”}

[[headers]]
Define which paths this specific [[headers]] block will cover.
for = “/*”
[headers.values]
Access-Control-Allow-Origin = “**”
Authorization = “Bearer api-key”

[[headers]]
Define which paths this specific [[headers]] block will cover.
for = “/api/*”
[headers.values]
Access-Control-Allow-Origin = “**”
Authorization = “Bearer api-key”

_headers don’t apply to proxy’d requests - you can instead use the headers functionality in the netlify.toml file as you described in your second response here to SEND headers with a proxy. The result there makes it look like you have a password protection on your site - could that be the case?