-1

I have a problem with a fetch on an API, here is my code:

const OPTIONS = {
  method: 'GET',
  headers: {
    'X-Auth-Token': process.env.FOOT_KEY,
  }
};

export async function setLeagues() {
  const countries = [
    {
      name: "Ligue 1",
      leagues_id: 2015
    },
    {
      name: "Premier League",
      leagues_id: 2021,
    },
    {
      name: "Bundesliga 1",
      leagues_id: 2002,
    },
    {
      name: "Primera Division",
      leagues_id: 2014,
    },
  ]

  let allLeagues = [];

  for (const country of countries) {
    const { name, leagues_id } = country;
    const response = await fetch(
      `http://api.football-data.org/v2/competitions/${leagues_id}`,
      OPTIONS
    );
    const data = await response.json();
    allLeagues.push(data);
  }

  return {
    type: "SET_LEAGUES",
    payload: allLeagues
  }
}

But I have a console error :

console error

However when I make the request with postman the returned response contains well: Access-Control-Allow-Origin: *.

Finally the error seems to be present only on firefox but not on chrome.

I try to fetch this API : football-data.org/docs/v2/index.html#_cors_handling, who is CORS enabled.

Thanks you for your help !

LucasDub
  • 11
  • 4
  • try adding CORS headers – Viroj Fernando Apr 06 '20 at 14:05
  • Can you specify please ? ^^ – LucasDub Apr 06 '20 at 14:15
  • You mean : mode: 'cors' ? if, yes this is the default settings, and anyway i try but that don't work. – LucasDub Apr 06 '20 at 14:20
  • You probably want to update the question to make it clear that you know the documentation for that API indicates it’s CORS-enabled. You can cite the URL for the part of the docs a https://www.football-data.org/docs/v2/index.html#_cors_handling. And given that the API is CORS-enabled, it’s odd that you’d be getting a CORS error when calling it, and also odd that you’d only get the error in Firefox – sideshowbarker Apr 07 '20 at 22:30
  • In Firefox, what’s the HTTP status code of the response? You can use the Network pane in browser devtools to check. Is it a 4xx or 5xx error rather than 200 OK success response? – sideshowbarker Apr 07 '20 at 22:33
  • Hi, thank you for your answers, there is no error in the network ... All the request have 200 state. – LucasDub Apr 09 '20 at 08:40
  • @Heretic Monkey, thanks for your answer but like the author says : "This question is not about how to fix a "No 'Access-Control-Allow-Origin'..." error". I looked at the link he offered but I found nothing relevant to my question. – LucasDub Apr 09 '20 at 08:55
  • I suggest you self-delete this question. Disabling AdBlock and other extensions is already a well-known and well-documented troubleshooting step for CORS errors. This question and the answer aren’t really useful to future readers, because they don’t add anything new to the existing knowledge in this area. – sideshowbarker Apr 09 '20 at 10:11
  • Ok it's really weird: The problem is actually not resolved. it worked for a while but without changing anything it caused me the same error and impossible to find the solution. Sometimes the fetch works and sometimes he doesn't and I have this error. However, my requests are always 200. – LucasDub Apr 15 '20 at 09:30

1 Answers1

-1

this might be more work, but when I had a similar issue this is what I used. I would recommend using cors-anywhere. Essentially you would host your own version of the service and make your requests using cors-anywhere as a proxy. Cors-anywhere will add the necessary headers and handle cors for you.

https://github.com/Rob--W/cors-anywhere

Also once you have it running, make sure to set you env vars so you only allow traffic coming from your website. I will look something like this: export CORSANYWHERE_WHITELIST=https://example.com

nsharma98
  • 223
  • 2
  • 14