为什么Chrome会取消CORS OPTION请求

Question

在我的应用程序中,我正在创建从HTTP到HTTPS的AJAX请求.这意味着我需要CORS.所以我在jQuery.ajax中添加了一些头文件和参数并进行测试.在Firefox中,Everythings工作正常,但在Chrome中没有.Chrome"杀死"每个预先发出的请求(OPTIONS).

jQuery脚本:

$(document).on('click', 'a.ajax', function(e) {
    e.preventDefault();
    $.ajax(this.href, {
        type: 'GET',
        dataType: 'json',
        crossDomain: false,
        headers: {'X-Requested-With': 'XMLHttpRequest'},
        xhrFields: {
            withCredentials: true
        }
    });
    return false;
});

HTTP转储:

> OPTIONS /foo HTTP/1.1
> User-Agent: curl/7.29.0
> Host: local.bar.cz
> Accept: */*
> Access-Control-Request-Headers:accept, origin, x-requested-with
> Access-Control-Request-Method:GET
> Origin:http://local.bar.cz
> 
< HTTP/1.1 204
< Server: nginx/1.2.7
< Date: Wed, 27 Feb 2013 15:06:54 GMT
< Content-Type: text/html; charset=utf-8
< Connection: keep-alive
< X-Powered-By: Nette Framework
< X-Frame-Options: SAMEORIGIN
< Access-Control-Allow-Origin: http://local.bar.cz
< Access-Control-Allow-Credentials: true
< Access-Control-Allow-Headers: accept, origin, x-requested-with
< Access-Control-Allow-Methods: OPTIONS, GET, POST, HEAD
< 

任何人都知道为什么chrome会杀死这个请求？

Answer 1

也许您的https服务器具有不受信任的证书.如果是这样,请先尝试使用浏览器访问URL,然后接受不受信任的连接.

Answer 2

接受证书并不总是能解决这个问题.如果您使用自签名证书,即使您首先接受,Chrome仍会在某些情况下取消您的预检OPTIONS请求.自2011年以来就是这样:

• https://code.google.com/p/chromium/issues/detail?id=96007

该页面中提到的解决方法是将自签名证书添加到系统的可信证书列表中.

在Mac上执行此操作的说明(稍​​微修改一下,以便与OS 10.8.5一起使用http://www.robpeck.com/2010/10/google-chrome-mac-os-x-and-self-signed -ssl-certificates /):

1. 在地址栏中,单击带有X的小锁.这将显示一个小信息屏幕.
2. 单击"证书信息"按钮.
3. 单击并将证书图像拖动到桌面上的打开的查找器窗口(它似乎不喜欢拖动到桌面.
4. 双击创建的文件.这将打开Keychain Access实用程序.输入您的密码以解锁它.
5. 确保将证书添加到系统密钥链,而不是登录密钥链.点击"始终信任",即使这似乎没有做任何事情.
6. 添加完毕后,双击它.您可能需要再次进行身份验证.
7. 展开"信任"部分."使用此证书时,"设置为"始终信任"

您可能需要重新启动Chrome才能使证书完全受信任(图标将更改为网址栏中的快乐绿色锁定).

Answer 3

值得一提的是,还有一个案例可以产生完全相同的结果:

如果您在等待返回请求(即通过承诺)时将浏览器重定位到不同的URL(window.location ..),则将提交OPTIONS请求,但后续响应(POST/GET/*)将被取消(自然......)

是..当然..如果你这样做,这是一个错误..但它可能看起来一样,并且消耗数小时看错了地方.考虑这样的代码:

makeAjaxCallThatReturnsAPromise.then(
    function () { // doSomething },
    function () { // doSomethingElse }
);
location.replace('http://some.where/');