尽管配置了正确的 CORS 标头，但仍出现 301 响应“跨源请求被阻止”

Question

我正在使用其公共 api 访问 NASA 图片，但收到此错误：

\n\n

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at\n[nasa api website] (Reason: CORS header \xe2\x80\x98Access-Control-Allow-Origin\xe2\x80\x99 missing).\n

\n\n

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

\n\n

响应标头：

\n\n

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

\n\n

请求标头：

\n\n

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

\n

Answer 1

在代码中为跨源请求指定 URL 时，\xe2\x80\x99 可能会出现一个常见错误，该错误可能会导致浏览器最终报告 CORS 错误，而实际上问题很简单-忽略请求 URL 本身的错误。

\n

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

\n

这种缺失会"s" 导致您发送请求的服务器以 3xx 重定向响应到https该 URL 的等效位置。但问题是：默认情况下，许多/大多数服务器不会Access-Control-Allow-Origin 在 3xx 响应中包含该标头。因此浏览器得到了 3xx，但由于它缺少Access-Control-Allow-Origin 标头，浏览器拒绝让您的代码遵循重定向；相反，浏览器会立即停止并发出 CORS 错误。

\n

因此，当您遇到此类情况时，解决方法是：在 devtools 中打开“网络”窗格并检查响应。检查那里显示的响应状态代码并检查响应标头。如果原因是此答案中描述的错误，您\xe2\x80\x99将看到Location响应标头。该值是服务器尝试将请求重定向到的 URL。

\n

当您查看该Location值时，您最初可能会认为它\xe2\x80\x99s 与代码中的请求 URL 完全相同，因为\xe2\x80\x99s 很容易忽视，区别只是那么一个丢失的"s"。但是当然，如​​果您采用该Location值中的 URL 并用它替换前端代码中的请求 URL，并且它有效，那么差异就会变得明显。

\n

因此，就本问题中的 URL 而言，问题只是前端代码指定了一个http://mars.jpl.nasa.gov应该是https://mars.jpl.nasa.govURL 的 URL。

\n