301 response with 'Cross-Origin Request Blocked' despite having correct CORS headers configured

Question

I'm accessing nasa pictures with their public api, but i get this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at
[nasa api website] (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

But when i inspect their response header, the ‘Access-Control-Allow-Origin’ is present and set to '*', here you can see it:

RESPONSE HEADERS:

Access-Control-Allow-Origin *
Age 0
Cache-Control   max-age=0, private, must-revalidate
Content-Encoding    gzip
Content-Type    application/json; charset=utf-8
Date    Sat, 28 Mar 2020 14:37:13 GMT
Etag    W/"e26hidden..."
Referrer-Policy strict-origin-when-cross-origin
Server  openresty
Strict-Transport-Security   max-age=31536000; includeSubDomains
Vary    Origin
Via https/1.1 api-umbrella (ApacheTrafficServer [cMsSf ]), 1.1 vegur
X-Cache MISS
X-Content-Type-Options  nosniff
X-Download-Options  noopen
X-Frame-Options SAMEORIGIN
X-Permitted-Cross-Domain-Policies   none
X-RateLimit-Limit   1000
X-RateLimit-Remaining   999
X-Request-Id    00c8c415-37ad-474b-bfbd-8e968d60f37f
X-Runtime   0.125778
X-Xss-Protection    1; mode=block

REQUEST HEADERS:

Accept  text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding gzip, deflate, br
Accept-Language en-US,en;q=0.5
Connection  keep-alive
Host    api.nasa.gov
If-None-Match   W/"e26chidden.."
Upgrade-Insecure-Requests   1
User-Agent  Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:74.0) Gecko/999991 Firefox/74.0

Answer 1

There’s a common mistake that can happen when specifying a URL for a cross-origin request in code, and the mistake can cause browsers to end up reporting a CORS error when in fact the problem is simply an easy-to-overlook mistake in the request URL itself.

The mistake is just a missing "s": using "http" as the URL protocol part instead of "https".

That missing "s" causes the server you sent the request to respond with a 3xx redirect to the equivalent https location of that URL. But the problem is: by default, many/most servers won’t include the Access-Control-Allow-Origin header in 3xx responses. So the browser gets that 3xx, but because it lacks the Access-Control-Allow-Origin header, the browser refuses to let your code follow the redirect; instead the browser stops right there and emits a CORS error.

So when you encounter a case like this, the way to troubleshoot it is: Open the Network pane in devtools and inspect the response. Check the response status code shown there and check the response headers. If the cause is the mistake described in this answer, you’ll see a Location response header. That value is the URL to which the server is trying to redirect the request.

And when you look at the Location value, you might initially think it’s exactly the same as the request URL you have in your code, because it’s easy to overlook that the difference is just that single missing "s". But of course if you take the URL in that Location value and replace the request URL in your frontend code with it, and it works, then the difference becomes apparent.

So in the case of the URL in this question, the problem was just, the frontend code specified a http://mars.jpl.nasa.gov URL that should instead be a https://mars.jpl.nasa.gov URL.