CODEWITHSUNDEEP
javascriptreactjsfetch-api
Adrian Savulescu
Adrian Savulescu

Reputation: 21

API Fetch failed with No 'Access-Control-Allow-Origin' header is present on the requested resource

I've been running out of my mind trying to deal with this problem.

I'm running React.js on my local machine under http://localhost:3000 and i'm trying to use the fetch method to load some data from http://api.population.io:80/1.0/countries

According to the API owner "The standard response format is JSON (application/json) with CORS for cross-domain requests."

I've tried various combinations of headers and what i have right now is this setup:

fetch("http://api.population.io:80/1.0/countries",{
    method: 'GET',
    mode: 'cors',
    headers: new Headers({
        "Content-Type": "application/json",
        'Access-Control-Allow-Origin':'*'
    })
})

According to Chrome, the following headers are being sent through the request: 

Access-Control-Request-Headers: access-control-allow-headers,access-control-allow-origin,content-type
Access-Control-Request-Method: GET
Origin: http://localhost:3000
Referer: http://localhost:3000/reports
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

But of course, the server returns a 403 status code with the following message:

Failed to load http://api.population.io/1.0/countries: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 403. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I know about the chrome plugin which allows me to work around this issue but this is not ideal and i'm afraid i don't know what to do, i've been trying to fix this my whole day and i finally gave up at 4am after trying almost everything i could find.

If there's someone smart enough to enlighten me, i'd definitely appreciate it and i'm even willing to ship to you a bunch of beers just to help me sort this out.

Upvotes: 1

Views: 6730

Answers (2)

Facundo Larrosa
Facundo Larrosa

Reputation: 3389

The problem is that fetch is failing on the standard OPTIONS request done on CORS mode. You can confirm by accessing the link http://api.population.io/1.0/countries on your browser and press the button OPTIONS, the response you get is the same response fetch is getting when accessing on CORS mode.

You should fix this on server.

Edit: Furthermore, the problem seems to be that domain api.population.io is redirecting to CloudFront and as the message says, the CDN only supports cachable requests. Seems to be the consequence of an architectural decision of bypassing a Django REST API through CloudFront that is a CDN Service.

If the request is made without CORS and its previous OPTIONS request , it works.

Upvotes: 0

Mike Bell
Mike Bell

Reputation: 1376

CORS headers are something that need to be properly set in the response from the server. You cannot make CORS work by supplying more headers in the request. It's not uncommon for responses to omit CORS headers in the case of a non-successful response (as is the case for you - you are getting a 403 response).

So, you need to figure out why the response was not successful, and why it does not include the CORS headers. Either way, you cannot send more CORS headers in the request to solve the issue.

Upvotes: 1

Related Questions