0

I have visited other related posts but still I was not able to find a solution to my case...

I am requesting data from site A to site B. Added the "Access-Control-Allow-Origin" to my project but now i am getting this error: "CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status".

Attached you can see my code:

useEffect(() => {
fetch(
  "https://raw.githubusercontent.com/simoncriado/Wordle/master/data/db.json",
  {
    headers: {
      "Access-Control-Allow-Origin":
        "https://wordle-react-project.netlify.app/",
      "Access-Control-Allow-Methods": [
        "POST",
        "GET",
        "OPTIONS",
        "DELETE",
        "PUT",
      ],
      "Access-Control-Allow-Headers": [
        "append",
        "delete",
        "entries",
        "foreach",
        "get",
        "has",
        "keys",
        "set",
        "values",
        "Authorization",
      ],
    },
  }
)
  .then((res) => res.json())
  .then((json) => {
    const letters = json.letters;
    setLetters(letters);
  });

}, []);

I am doing a similar fetch to the same URL from another component. Using same code.

Any idea what the problem could be? Thanks much! Simon

Simon CF
  • 25
  • 1
  • 1
  • 8

1 Answers1

5

The headers which you are setting for this request aren't required. In CORS these headers must be set on the server response for browser to allow the response if server has same-origin policy.

I see https://raw.githubusercontent.com allows cross-origin requests, so try making this request without any headers, it should work fine.

fetch(
  "https://raw.githubusercontent.com/simoncriado/Wordle/master/data/db.json"
)
  .then((res) => res.json())
  .then((json) => {
    const letters = json.letters;
    console.log(letters);
  });
Shankar
  • 320
  • 1
  • 6
  • It worked... weird cause I think this is how my code looked at the beggining and it did not work. The only thing I wasnt including was the empty headers. So I had no headers section at all. Can this make any difference? Thanks for your help! – Simon CF May 15 '22 at 09:18
  • No, headers isn't required. You can remove headers and try, it will work. I have just updated the snippet as well – Shankar May 15 '22 at 09:21
  • what if you need authentication token? Getting same error as him – strix25 Mar 03 '23 at 17:02
  • You mean if you need to pass auth token in the request @strix25 ? – Shankar Mar 06 '23 at 10:04
  • @Shankar yes. I see the token in the GET request header, but for some reason OPTIONS header gets 403 error and outputs error like written above. From what I know OPTIONS request will never have auth token in it, but I might be doing GET request wrong if I am getting error above. Or API is broken :) – strix25 Mar 06 '23 at 10:25
  • @strix25 I assume you are hitting some other API and not github. It is possible that even OPTIONS requests require Authorization on that server, that would be the reason you are getting 403 for OPTIONS request as well – Shankar Mar 06 '23 at 14:41
  • @Shankar looks like guys that built API forgot to add OPTIONS path -.- – strix25 Mar 07 '23 at 10:04