尽管配置了正确的 CORS headers，但 301 响应 'Cross-Origin Request Blocked'

Question

我正在访问带有 public api 的美国国家航空航天局图片，但出现此错误：

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).

但是当我检查他们的回复时 header，'Access-Control-Allow-Origin' 存在并设置为 '*'，在这里你可以看到它：

响应 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

请求 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

在代码中为 cross-origin 请求指定 URL 时可能会发生一个常见错误，该错误可能导致浏览器最终报告 CORS 错误，而实际上问题是只是请求 URL 本身的一个 easy-to-overlook 错误。

错误只是缺少 "s"：使用 "http" 作为 URL 协议部分而不是 "https"。

缺少 "s" 会导致您发送请求的服务器以 3xx 重定向响应到 URL 的等效 https 位置。但问题是：默认情况下，many/most 服务器不会在 3xx 响应中包含 Access-Control-Allow-Origin header。所以浏览器得到那个 3xx，但是因为它缺少 Access-Control-Allow-Origin header，浏览器拒绝让你的代码跟随重定向；相反，浏览器会停在那里并发出 CORS 错误。

所以当你遇到这样的情况时，排查方法是：打开devtools中的Network面板并检查响应。检查那里显示的响应状态代码并检查响应 headers。如果原因是此答案中描述的错误，您将看到 Location 响应 header。该值是服务器尝试将请求重定向到的 URL。

并且当您查看 Location 值时，您最初可能认为它与您在代码中的请求 URL 完全相同，因为很容易忽略差异只是那一个失踪 "s"。但是当然，如果你在那个 Location 值中使用 URL 并用它替换你的前端代码中的请求 URL，并且它有效，那么区别就很明显了。

所以在这个问题中 URL 的情况下，问题只是，前端代码指定了 http://mars.jpl.nasa.gov URL 而应该是 https://mars.jpl.nasa.gov URL.

尽管配置了正确的 CORS headers，但 301 响应 'Cross-Origin Request Blocked'

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

javascript

xmlhttprequest

cors

http-status-code-301