CORS issue: Response to preflight request doesn't pass access control check: It does not have HTTP ok status

Question

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

Answer 1

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);
  });