CORS 错误仅发生在 Chrome 中的某些 XHR 上

Question

我们有一个 SPA，它在 Require.js 的协助下从单独的后端服务器中提取更多的 JavaScript 模块。根据 XHR 加载过程的性质，向后端服务器发出飞行前 OPTIONS 请求，并且 Access-Control-Allow-Origin 响应完全有效。正如预期的那样，登录和初始模块加载过程工作正常。

XHR 完成加载：“http://backend.cloudapp.net/api/modules/resourceA”。

XHR 完成加载：“http://backend.cloudapp.net/api/modules/resourceB”。

有趣的是，某些需要更多模块的后续操作会意外地在 Chrome 中引发 CORS 错误。

XMLHttpRequest 无法加载 http://backend.cloudapp.net/api/modules/resourceC。起源 https://frontend.cloudapp.net 不允许 访问控制允许来源。

这没有意义，因为之前的模块加载得很好。即使是实际的 OPTIONS 预检也适合 resourceC。 UI 中的其他一些地方也可以正常加载它们的模块。 Firefox 似乎并没有遇到这个问题。有没有人遇到过类似的 CORS 错误？

成功（预期）模块的请求/响应标头

Request URL:http://backend.cloudapp.net/api/modules/resourceA
Request Method:OPTIONS
Status Code:200 OK

Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Access-Control-Request-Headers:accept, origin, content-type
Access-Control-Request-Method:GET
Host:backend.cloudapp.net
Origin:https://frontend.cloudapp.net
Proxy-Connection:keep-alive
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36

Response Headers
Access-Control-Allow-Headers:accept, origin, content-type
Access-Control-Allow-Methods:GET
Access-Control-Allow-Origin:https://frontend.cloudapp.net
Cache-Control:no-cache
Connection:Keep-Alive
Content-Length:0
Date:Wed, 19 Jun 2013 07:12:42 GMT
Expires:-1
Pragma:no-cache
Proxy-Connection:Keep-Alive
Server:Microsoft-IIS/7.5
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET



Request URL:http://backend.cloudapp.net/api/modules/resourceA
Request Method:GET
Status Code:200 OK

Request Headers
Accept:application/json
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Content-Type:application/json
Host:backend.cloudapp.net
Origin:https://frontend.cloudapp.net
Proxy-Connection:keep-alive
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36

Response Headers
Access-Control-Allow-Origin:https://frontend.cloudapp.net
Cache-Control:no-cache
Connection:Keep-Alive
Content-Length:5048
Content-Type:application/json; charset=utf-8
Date:Wed, 19 Jun 2013 07:12:42 GMT
Expires:-1
Pragma:no-cache
Proxy-Connection:Keep-Alive
Server:Microsoft-IIS/7.5
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET

不成功模块的请求/响应标头

Request URL:http://backend.cloudapp.net/api/modules/resourceC
Request Method:OPTIONS
Status Code:200 OK

Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Access-Control-Request-Headers:accept, origin, content-type
Access-Control-Request-Method:GET
Host:backend.cloudapp.net
Origin:https://frontend.cloudapp.net
Proxy-Connection:keep-alive
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36

Response Headers
Access-Control-Allow-Headers:accept, origin, content-type
Access-Control-Allow-Methods:GET
Access-Control-Allow-Origin:https://frontend.cloudapp.net
Cache-Control:no-cache
Connection:Keep-Alive
Content-Length:0
Date:Wed, 19 Jun 2013 07:12:59 GMT
Expires:-1
Pragma:no-cache
Proxy-Connection:Keep-Alive
Server:Microsoft-IIS/7.5
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET



Request URL:http://backend.cloudapp.net/api/modules/resourceC
Request Headers
Accept:application/json
Content-Type:application/json
Origin:https://frontend.cloudapp.net
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36

(And browser blocks further action)

Answer 1

Inspired from my answer here

如果有任何失败的 XHR 发送任何特殊的 unicode 字符，可能值得调查。在我们的例子中，我们的一个用户名包含一个 unicode 字符，而我们的 HTTP 代理没有正确处理它，从而导致 CORS 错误。

Answer 2

鉴于 Chrome 经历了这么多版本更新，除了我们现在在不同的 AWS 基础设施中以不同的封装方式部署一些模块资源外，现在我们不再遇到这个问题了。