5

I had a react app on Netlify for 6 months, with no problems. After the change from .com to .app, my site started getting CORS error messages:

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

When I run on my local server, it runs fine, and there are no error messages, but when delpoyed on Netlify, I get the error message above.

I have added a netlify.toml file to my root folder:

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

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

But I still get the error message, and a block from the api news data from showing up on my site.

I making the data call using axios.

import axios from 'axios';

const API_URL = "https://newsapi.org/v2/everything?q=bitcoin&from=2020-5-27&sortBy=publishedAt&apiKey=1b823477c9864b7ebb4eb4e9d4148238";

//async function grabbing bitCoin data
export const getNews = async () => {
  const result = await axios.get(API_URL)
  .then(response => {
  console.log(response.data);
  return response.data.articles;
  });
  return(result);
}import axios from 'axios';

const API_URL = "https://newsapi.org/v2/everything?q=bitcoin&from=2020-5-27&sortBy=publishedAt&apiKey=xxx";

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

I tried different things that Netilify suggested, but I am kinda a newbie and have no idea how to fix this...

How can I fix the CORS issue in my project? Why did it work for 6 months, and now there is a CORS issue? It seems like it is an issue with Netlify, and I need to somehow configure that.

Thanks!

cyberAnn
  • 411
  • 1
  • 7
  • 16
  • 1
    no cors issue locally - only issues on netlify – cyberAnn May 29 '20 at 17:12
  • follow this docs probably will solve your issue https://www.digitalocean.com/community/tutorials/nodejs-solve-cors-once-and-for-all-netlify-dev – fadi omar May 29 '20 at 17:21
  • I think you need to rebuild netlify function – fadi omar May 29 '20 at 17:22
  • 3
    It seems that somewhere around May 22nd, News API stopped sending CORS headers in responses from `https://newsapi.org/v2` API endpoints. You only alternatives are to change to handling the requests and responses from your backend code rather than your frontend JavaScript code — or else set up your own CORS proxy as described in the *How to use a CORS proxy to get around “No Access-Control-Allow-Origin header” problems* section of the answer at https://stackoverflow.com/a/43881141/441757, and change the request URL in your frontend JavaScript code to use your proxy address. – sideshowbarker May 29 '20 at 22:21
  • 4
    why is this question closed? it's specific to netlify use case and the related questions do not relate. – Marcelo Fonseca Oct 22 '20 at 02:48

0 Answers0