Netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Support
1

Hello,

I’ve been using netlify since Nov 2019, for both of my create-react-apps projects, which use axios to make API news calls. Both sites worked perfectly fine up until the recent .com change .app change.

Both sites run fine with no CORS erros on the local server, erros only appears from netlify, which makes me think there is some kind of issue with netlify.

The error message:
Access to XMLHttpRequest at ‘https://newsapi.org/v2/everything?q=bitcoin&from=2020-5-27&sortBy=publishedAt&apiKey=xxx’ from origin ‘https://bitcoin-news.netlify.app’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

code:
const API_URL = “https://newsapi.org/v2/everything?q=bitcoin&from=2020-5-27&sortBy=publishedAt&apiKey=xxx”;
export const getNews = async () => {
const result = await axios.get(API_URL)
.then(response => {
console.log(response.data);
return response.data.articles;
});
return(result);
}

I’ll repeat everything works fine on the local server, with no error messages, but when deployed on netlify, I get the CORS error message above. Also another werid thing is that I did not have the error message from Nov 19 - April 20… not sure why it has errors now.

Being a complete newbie to coding in general and to netify, how can i resolve the issue?
Thank you,
ainneo

2

Hey @ainneo,

Do you have a redirect rule for this? Are you proxying? Check to see if this uses .com or .app!

3

I am not proxying – sorry I am a total newbie to api calls, cors, proxying… should I be proxying?

I am using axios to make api calls.
I added a netlify.toml file in the root of my react project, and headers file, as I have read in the community forum… just not sure what i am doing is correct…

link to site: https://bitcoin-goop.netlify.app/
link to github: https://github.com/ainneo/bic-news

4

Hey!

Have you checked out this discussion at all?

5

yes, i did, that was the first discussion i read and the reason why i added the files as I stated in the above post. i added the netlify.toml file and the headers file… it still does not work… i am trying to undertsand why it works on local but not on netlify… why did it work for 6 months, but no longer works… and how can i fix the issue, so far none of the discussions has helped which is why I wrote this post.

6

Hey @ainneo,

The Deploy Summary above the deploy log itself will inform you of processed rules. It’s worth checking to see if the count there matches your expectations.

If this isn’t showing the header rule count you expect, you should check your syntax.

If this is showing that header rules have been processed, can you provide me with a link to a deploy log where this function is built?

8

Figured out the issue, after receiving a 426 error. NewsApi changed its rules. It will only serve to localhost on free dev plans… The 426 error came after the CORS issue was fixed. So in the end it was the API that had changed it rules.

1 Like
9

For others who hit CORS errors and are using newapi.org, there’s more discussion happening over here ----> Getting error 426 from newsapi.org - #5 by Epsiloth

1 Like