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

Question

我正在使用他们的公共(public) api 访问 nasa 图片，但我收到此错误:

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

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

回复标题:

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

请求 header :

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

在代码中为跨域请求指定 URL 时可能会发生一个常见错误，该错误可能会导致浏览器最终报告 CORS 错误，而实际上该问题只是请求中容易忽略的错误网址本身。
错误只是缺少"s" : 使用 "http"作为 URL 协议(protocol)部分而不是 "https" .
那个失踪的"s"导致您发送请求的服务器以 3xx 重定向响应到等效的 https该 URL 的位置。但问题是:默认情况下，许多/大多数服务器不会包含 Access-Control-Allow-Origin 3xx 响应中的 header 。所以浏览器得到那个 3xx，但是因为它缺少 Access-Control-Allow-Origin header ，浏览器拒绝让您的代码跟随重定向；相反，浏览器会停在那里并发出 CORS 错误。
所以遇到这样的情况，排查的方法是:在devtools中打开Network面板，检查响应。检查那里显示的响应状态代码并检查响应 header 。如果原因是此答案中描述的错误，您将看到 Location响应头。该值是服务器尝试将请求重定向到的 URL。
当您查看 Location值，您可能最初认为它与您的代码中的请求 URL 完全相同，因为很容易忽略差异只是缺少了一个 "s" .但是当然，如​​果您使用 Location 中的 URL值并用它替换前端代码中的请求 URL，它可以工作，那么差异就变得明显了。
所以在这个问题中的 URL 的情况下，问题只是，前端代码指定了 http://mars.jpl.nasa.gov URL 应该是 https://mars.jpl.nasa.gov网址。