Api call cause error 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I am trying to call an api but it is giving me following error :

Access to fetch at 'https://someapi.url/profile?FullName=sadaf&DateFrom=2000-01-01' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I am using react and the code is :

try {
        let url = `https://someapi.url/profile?FullName=sadaf&DateFrom=2000-01-01`;
        let response = await fetch(url,{
            mode: 'cors', // no-cors,
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json',
            "Accept": 'application/json',
            'Origin' : 'http://localhost:3000'
                //'Content-Type': 'text/xml'
                // 'Content-Type': 'application/x-www-form-urlencoded',
              },
        });

        this.setState(() => {
            return {
                searchResults : response
            }
        })
      } catch (error) {

        console.error(error);
      }

please guide what to do

that's expected; `CORS` restrict resource access from client javascript code only — marzelin, Oct 24 '19 at 13:08
when i set mode = 'no-cros' it give me empty respose with these values {type: "opaque", url: "", redirected: false, status: 0, ok: false, …} — Sadaf Sid, Oct 24 '19 at 13:08
yes it will succeed from express. `CORS` is a browser security feature. — marzelin, Oct 24 '19 at 13:10
adding no-cors will not solve the problem check here for more info https://stackoverflow.com/questions/43262121/trying-to-use-fetch-and-pass-in-mode-no-cors — Nadir Laskar, Oct 24 '19 at 13:11
`no-cors` only makes the response unusable. You have to enable `CORS` on the server. — marzelin, Oct 24 '19 at 13:14

Nadir Laskar · Answer 1 · 2019-10-24T13:17:47.463

The error is due to CORS, there is nothing wrong with the front-end code.

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.

To fix this issue, the server should set the CORS headers, See here on how to enable CORS for your server

If your server is running express you need to set cors like this,

app.use(function(req, res, next) {
  // update to match the domain you will make the request from
  res.header("Access-Control-Allow-Origin", "YOUR-DOMAIN.TLD"); 
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

or use the cors middleware for express

there's cors middleware for express: https://expressjs.com/en/resources/middleware/cors.html — marzelin, Oct 24 '19 at 13:15

Api call cause error 'Access-Control-Allow-Origin' header is present on the requested resource

1 Answers1