HTTP OPTIONS 飞行前请求加载已取消，Chrome 中处于待处理状态

Posted 2023-03-04

【中文标题】HTTP OPTIONS 飞行前请求加载已取消，Chrome 中处于待处理状态

【英文标题】：HTTP OPTIONS Pre-flight request Load Cancelled with pending Status in Chrome

【发布时间】：2012-12-30 08:38:57

【问题描述】：

我正在使用 Sencha Touch 2.1.0。我正在进行 HTTP GET 调用。这是一个 CORS 请求。因此它按预期发送 Pre-flight HTTP OPTIONS 命令。

我已经在我的服务器上安装并配置了 CORS 过滤器。直到昨天，来自我的代码的调用都进行得很好。今天突然停止加载数据。当我在 Chrome 中检查网络调用时，我看到 OPTIONS 方法显示为“Load cancelled”

方法：选项 状态文本：“加载已取消” 类型：待定 发起者：Connection.js:319

我在第一次配置 CORS 过滤器时遇到了类似的问题。当我清除浏览器缓存时，它开始工作。这一次，我不知道为什么它突然停止工作了。即使我清除浏览器中的缓存和历史记录，它也没有得到修复。

如果我在 Firefox 中从 HTTPRequestor 进行相同的调用，它的效果会非常好。这是电话。由于保密原因，我屏蔽了网址。

OPTIONS http://myurl/rest/items?_dc=1358304888220&page=1&start=0&limit=25 HTTP/1.1
Access-Control-Request-Method: GET
Origin: http://localhost:8080
Access-Control-Request-Headers: accept, origin, x-requested-with

同样的请求给了我来自 HTTPRequestor 的非常好的响应。结果如下：

OPTIONS http://myurl/rest/items?_dc=1358304888220&page=1&start=0&limit=25
Access-Control-Request-Headers: accept, origin, x-requested-with
Access-Control-Request-Method: GET
Origin: http://localhost:8080


 -- response --
200 OK
Date:  Wed, 16 Jan 2013 03:19:27 GMT

Server:  Apache-Coyote/1.1

Access-Control-Allow-Origin:  http://localhost:8080

Access-Control-Allow-Credentials:  true

Access-Control-Allow-Methods:  HEAD, GET, POST, OPTIONS

Access-Control-Allow-Headers:  X-Requested-With, Origin, Accept, Content-Type

Content-Length:  0

Strict-Transport-Security:  max-age=15768000, includeSubDomains

Keep-Alive:  timeout=15, max=100

Connection:  Keep-Alive

商店中的 Sencha 代码以进行此调用：

    proxy: 
        type: 'ajax',
        method: 'GET',
        url: 'http://myurl/rest/items',
        withCredentials: true,
        useDefaultXhrHeader: false,
        disableCaching: false,
        headers: 
            "Accept": "application/json"
        ,
        failure: function(response) 
            if (response.timedout) 
                Ext.Msg.alert('Timeout', "The server timed out :(");
             else if (response.aborted) 
                Ext.Msg.alert('Aborted', "Looks like you aborted the request");
             else 
                Ext.Msg.alert('Bad', "Something went wrong with your request");
            
        ,
        success: function(response)
            Ext.Msg.alert(response.responseText);
        
    ,
    autoLoad: true,

请帮助我了解如何解决此问题。

【问题讨论】：

你能显示你用来发出请求的 javascript 代码吗？你在设置.withCredentials = true;吗？

@Monsur，我刚刚添加了用于进行此调用的 sencha 代码。是的 withCredentials 是真的。这段代码实际上一直工作到前天，突然停止工作。我不确定出了什么问题。我没有在服务器端进行任何更改。

【参考方案1】：

由于上次 Google Chrome 更新，这似乎是一个问题。当我尝试使用 Iron 浏览器时，它可以工作。

【参考方案2】：

我在测试版的 Webkit 浏览器中遇到了类似的问题。事实证明，Content-Type 标头是为包含 Blob 的 XMLHttpRequest 隐式设置的，因此我必须将其添加到上传服务器上的 Access-Control-Allow-Headers。

见：https://bugs.webkit.org/show_bug.cgi?id=99983

【参考方案3】：

我刚刚解决了这个问题。服务器响应Header应设置为：

"Access-Control-Allow-Origin": "*"
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept"

你已经这样做了。我认为如果 GET 或 POST 方法包含 X-Requested-With 标头，则将首先发送 OPTIONS 方法。 X-Requested-With 标头在默认的 XHR 标头中。所以我们应该将'useDefaultXhrHeader'设置为false。 Ext.data.Store 不支持此参数。编辑sdk/src/data/Connection.js，将useDefaultXhrHeader的默认值改为false。