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)
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.
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.
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?
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
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,
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?
@JUCHY This is a little too late for a response but had the same issue today with my react-netlify web app and Luke’s link to proxying with netlify did the magic for me.
