HOw to fix cors issue in Netlify

Question

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!

HOw to fix cors issue in Netlify

0 Answers