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

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.

CodePudding user response：

The error message you are encountering is due to a restriction in the browser called the same-origin policy, which only allows web pages to make requests to resources hosted on the same domain. To bypass this restriction, the server that the resource is hosted on needs to include an Access-Control-Allow-Origin (it need be in the server, not in your client) header in its response, indicating which domains are allowed to make requests.

Since the server is not including this header, you have two options:

Use a proxy service: As you mentioned, you can use a proxy service such as cors-anywhere.herokuapp.com to make the request, but this has limitations and is not suitable for production.

Create and use your proxy service: Creating a backend for frontend (BFF) is another option. Your BFF can act as a proxy and make the request to the https://api.b365api.com on behalf of your frontend. The BFF can then add the necessary Access-Control-Allow-Origin header to the response before forwarding it to the frontend. This way, you won't have to worry about the same-origin policy and can make requests to the API without any restrictions. You can implement this in any language and framework of your choice, as long as it can make HTTP requests and add headers to the responses. Once your BFF is set up, you can simply make requests to your BFF from your frontend instead of directly to https://api.b365api.com.

Ask the server owner to add the header: Contact the owner of the server and ask them to include the Access-Control-Allow-Origin header in their responses with a value of * to allow requests from any domain, or with the domain of your website to allow requests only from that domain.

CodePudding user response：

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