301响应“跨源请求被拦截”,尽管已配置正确的CORS header

我正在使用NASA的公共API访问他们的图片,但我遇到了这个错误:

跨源请求被拦截:同源策略禁止读取远程资源[nasa api website](原因:缺少CORS header 'Access-Control-Allow-Origin')。 

但是当我检查他们的响应头时,'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

请求头:

接受文本/ html、应用程序/ xhtml + xml、应用程序/ xml; q = 0.9、图像/ webp、* / *; q = 0.8
接受编码gzip、deflate、br
接受语言en-US,en; q = 0.5
连接保持活动状态
主机api.nasa.gov
如果无匹配W /“e26chidden...”
升级不安全请求1
用户代理Mozilla / 5.0(Macintosh; Intel Mac OS X 10.15; rv:74.0)Gecko / 999991 Firefox / 74.0
点赞
用户441757
用户441757

问题描述

在代码中指定跨域请求的 URL 时,常会发生一个常见的错误,此错误可能导致浏览器报告 CORS 错误,而实际上问题只是请求 URL 上一个容易忽视的错误。

这个错误很简单,只是少了一个 "s":在 URL 协议部分使用 "http" 而不是 "https"。

这个缺失的 "s" 会导致接收请求的服务器响应一个 3xx 重定向到相应的 https URL。但问题在于:默认情况下,许多/大多数服务器不会在 3xx 响应中包含 Access-Control-Allow-Origin 标头。因此,浏览器会收到这个 3xx,但由于它缺少 Access-Control-Allow-Origin 标头,浏览器会拒绝让您的代码跟随重定向,而是停在那里并发出 CORS 错误。

因此,在遇到这种情况时,调试方法是:在开发工具的网络面板中打开,并检查响应。检查显示的响应状态代码和响应标头。如果造成问题的是本答案中描述的错误,则您会看到一个 Location 响应标头。该值是服务器试图重定向请求的 URL。

当您查看 Location 值时,您可能最初认为它与您在代码中的请求 URL 完全相同,因为很容易忽略只有一个缺失的 "s"。但是,当您使用 Location 值中的 URL 替换前端代码中的请求 URL,并且它能够工作时,则差异变得明显。

因此,在这个问题的 URL 中,问题仅仅是前端代码指定了一个 http://mars.jpl.nasa.gov,实际上应该是一个 https://mars.jpl.nasa.gov 的 URL。

译者注

原文中的乱码由特殊字符编码不一致造成,已在翻译中予以修正。

2020-04-01 11:52:38