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

【问题标题】：301 response with 'Cross-Origin Request Blocked' despite having correct CORS headers configured尽管配置了正确的 CORS 标头，但 301 响应“跨源请求被阻止”
【发布时间】：2020-07-09 03:43:09
【问题描述】：

我正在使用他们的公共 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

请求标头：

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

【问题讨论】：

你有两次“响应标头”，不应该是“请求标头”吗？
您的 javascript 请求数据的情况如何？
使用浏览器开发工具中的网络窗格检查浏览器发送的所有请求和浏览器接收的所有响应。检查响应的 HTTP 状态代码。是 4xx 还是 5xx 错误而不是 200 OK 成功响应？
是的，第二个响应头实际上是请求头，我编辑了它。 js请求是req.open("GET", myUrl); req.send();对api的调用很好，但是我尝试在画布中复制img，它给了我cors错误，状态码是301：Request URL:http://mars.jpl.nasa.gov/msl-raw-images/proj/msl/redops/ods/surface/sol/01000/opgs/edr/ncam/NLB_486272784EDR_F0481570NCAM00415M_.JPG Request Method:GET Remote Address:54.183.32.82:80 Status Code: 301 Version:HTTP/1.1

标签： javascript xmlhttprequest cors http-status-code-301

【解决方案1】：

在代码中为跨域请求指定 URL 时可能会发生一个常见错误，该错误可能会导致浏览器最终报告 CORS 错误，而实际上该问题只是一个容易被忽略的错误在请求 URL 本身中。

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

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

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

当您查看 Location 值时，您可能最初认为它与您在代码中的请求 URL 完全相同 - 因为很容易忽略差异只是缺少一个 "s"。但是当然，如果您使用该 Location 值中的 URL 并将前端代码中的请求 URL 替换为它，并且它可以工作，那么差异就会变得明显。

所以对于这个问题中的 URL，问题只是前端代码指定了一个 http://mars.jpl.nasa.gov URL，而应该是一个 https://mars.jpl.nasa.gov URL。

【讨论】：