CORS error for data pulled from netlify

Support
1

For bienehuus.netlify.app I hace a CORS error which is new.

So far I had the a SIMPLA-CMS Site running on a company server and was pulling the DATA via GITHUB from NETLIFY. Since about a week I get a CORS error for the live site www.bienehuus.ch.

You can get the log here: Dropbox - File Deleted

I set the _headers to

/*
Access-Control-Allow-Origin: *

and netlify.toml to

# The following redirect is intended for use with most SPAs that handle
# routing internally.
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
  # Define which paths this specific [[headers]] block will cover.
  for = "/*"
    [headers.values]
    Access-Control-Allow-Origin = "*"

The Problem is still happening. I checked with the SIMPLA devs and they say it must be on NETLIFY side.

This is urgent since it is a life site for a client.

Any help appreciated.

Best regards
Niklaus

2

Hi, another person ran into a similar issue here. Not sure if it’s related but I recommend trying isomorphic-fetch - npm as an alternative to axios and see if that works better.

3

i haven’t heard of that package but i ended up switching to node-fetch and it seemed to work. i’d be curious where the problem is, whether it’s with axios or not though. the odd thing to me is that the local requests work fine when using axios POST

1 Like
5

Hard to say what causes it, but we can’t really provide tech support at that depth within your source code. Glad to hear that you found a workaround though!

6

It still does not work. Is there no way to disable/allow cross origin requests?

7

How come it worked and then just stopped working on Netlify without me chaning anything?

9

Jen Kagan from Netlify solved the issue. Netlify changed xxx.netlify.com to xxx.netlify.app.

This was causing the error.

Thanks to everyone who helped with the support.

1 Like
10

how was that the solution? what did you change? I am having the same issues… after they changed the .com to .app, both my sites stopped working… and threw a CORS error.

11

Sounds like you may be referencing an absolute URL like https://site.netlify.com/resource.js and now you’ll want to change that to https://site.netlify.app/resource.js

It is also possible, that if you are getting the CORS error from a service other than Netlify, that you should update the list of allowed domains there from site.netlify.com to site.netlify.app. This is usually done in an Access-Control-Allow-Origin HTTP response header.

12

I am not referencing any abosolute URL… where is that done and what is that?

I have two react apps - that make api calls to News Api calls using axios.
The site worked fine for 6 months, until Netlify changed the .com to app, since then none of my sites work.

On my local server, both my sites work fine with no errors but on Netlify, I have CORs errors, plus a bunch of others… it so weird that is works fine on local but not fine on Netlify, which makes me think there is something I have to do in Netlify… any help would be awesome…

Please also fogive me, I am a totally newbie to making api calls…

13

ainneo, did you sign up for an API key or something of that sort? If yes, did you have to supply a URL to get that key? There is a good chance that you’ll need to change the URL from .com to .app in that case.

14

hi perry,

i do have a key from News API. i did not have to supply a URL to get the key. they just assign the key, in which i use with the URL. why would i change the news api URL from .com to .app?

this is how i am making my api call… I feel I must be missing a step to make it work on Netlify/but it did work for 6 months…:

const API_URL = https://newsapi.org/v2/everything?q=bitcoin&from=2020-5-27&sortBy=publishedAt&apiKey=${process.env.REACT_APP_API_KEY}

export const getNews = async () => {
const result = await axios.get(API_URL)
.then(response => {
console.log(response.data);
return response.data.articles;
});
return(result);
}

15

hi ainneo,

sometimes you need to supply a URL to the company/organization hosting the API when you sign up, in order to obtain an API key. It varies from organization to organization as to whether they ask for this or not. Seems like News API does not ask for this, so you can likely disregard.

I don’t have a solution to your problem at the moment, but thought I would clarify on my comment above.

16

Hey @ainneo,

If the API stopped working as soon as the .com to .app migration took place, this is certainly because a link to yoursite.netlify.com exists in your code/HTML/redirects. Please ensure you’ve searched your repo/site for this!

Failing that, if you have a deploy log or your site name to hand, we can take a look.