Javascript Fetch CORS header ‘Access-Control-Allow-Origin’ missing

Question

When running the following fetch request in my React project:

const options = { method: "GET", headers: { accept: "application/json", "Access-Control-Allow-Origin": "*" } };
      response = await fetch(
        `https://api.b365api.com/v1/bet365/upcoming?league_id=${league}&sport_id=${sport.id}&token=TOKEN`,
        options
      ).catch((err) => console.error(err));

The request returns with the error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.b365api.com/v1/bet365/upcoming?league_id=131095496&sport_id=1&token=TOKEN. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

I've searched through A LOT of different pages and haven't found an answer I can use other than using a proxy of some sort like https://cors-anywhere.herokuapp.com/ which has a limit and just doesn't work in production.

You need to set the header in server response. You can only do this if you access to the server. — kennarddh, Jan 30 '23 at 12:55

score 0 · Answer 1 · answered Jan 30 '23 at 13:02

Does this or this helps you?

In my experience, there are somethings that can cause CORS errors: For me, the most common issue is a backend function error... this happens a lot when I'm coding a new feature and happens an unhandled exception in my code. This throws CORS error.

Or maybe you have to config your backend server to use CORS:

import express from 'express'
import cors from 'cors'

const app = express()
app.use( cors() ) // - here

Hope I had helped you, good luck

Javascript Fetch CORS header ‘Access-Control-Allow-Origin’ missing

1 Answers1