gpt4 book ai didi

javascript - 当跟进请求的答案是 204 时,为什么 OPTIONS 请求会失败?

转载 作者:数据小太阳 更新时间:2023-10-29 05:04:26 30 4
gpt4 key购买 nike

我正在构建一个基于 Backbone.js 的应用程序,但遇到了一个奇怪的问题。

在某个时刻,应用程序请求了一个集合资源,在 Chrome(和 Safari)中我得到了这样的错误:

XMLHttpRequest cannot load http://api.mydomain.net/v1/foos/00000d/bars/000014/boots Origin http://localhost:3501 is not allowed by Access-Control-Allow-Origin.

好吧,我想到了 CORS 问题并将其归咎于我的 API。然后通过 CURL 请求这个资源:

curl -i -H'Accept: application/json' -H'X-Auth-Token: pAWp5hrCmXA83GgFzgHC' -XOPTIONS 'http://api.mydomain.net/v1/foos/00000d/bars/000014/boots'
HTTP/1.1 200 OK
Status: 200
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,X-Auth-Token
Content-Length: 0

看起来不错,现在 GET:

curl -i -H'Accept: application/json' -H'X-Auth-Token: pAWp5hrCmXA83GgFzgHC' -XGET 'http://api.mydomain.net/v1/foos/00000d/bars/000014/boots'
HTTP/1.1 204 No Content
Status: 204
Cache-Control: no-cache
Content-Length: 0
Content-Type: text/plain

如果我请求包含至少一个对象的 Boot 集合,一切正常。正如我认为的那样,我的服务器的 CORS header 以 arr 响应完全没问题。那么为什么浏览器会报告跨源资源问题呢?

是因为我的 204 响应的内容类型 text/plain 吗?

开发工具中的预检(选项)请求: OPTIONS

中止响应的请求 header : GET

最佳答案

您还必须在第二个请求的响应 header 中包含 Access-Control-Allow-Origin。这不是客户端问题,而是后端问题。

此行为符合 CORS specification , 应用于以下解释 ( section 7.1.5 "Cross-Origin Request with Preflight" ):

  1. 预检请求(details 省略)
  2. “将 cross-origin request status 设置为预检完成。”
  3. “这是实际请求。(...) 提出请求时请遵守以下请求规则。”
    • 如果响应的 HTTP 状态代码为 301、302、303 或 307 不适用
    • 如果最终用户取消请求 不适用
    • 如果出现网络错误 不适用
    • 否则
      执行 resource sharing check .如果返回失败,则应用缓存和网络错误步骤。

您的 请求在 resource sharing check 的第一步已经失败:

  1. 如果响应包含零个或多个 Access-Control-Allow-Origin header 值,则返回失败并终止此算法。

我提供了一个简单的 NodeJS 示例来说明您的问题。
您当前的后端行为如下:

require('http').createServer(function(request, response) {
if (request.method == 'OPTIONS') { // Handle preflight
response.writeHead(200, {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "X-Foo"
});
} else { // Handle actual requests
response.writeHead(204, {
//"Access-Control-Allow-Origin": "*"
});
}
response.end();
}).listen(12345);

现在,发出请求并体验失败:

var x = new XMLHttpRequest;
x.open('GET', 'http://localhost:12345');
x.setRequestHeader('X-Foo','header to trigger preflight');
x.send();

回到我提供的代码,在响应中启用Access-Control-Allow-Origin header ,然后再次测试。您的请求现在将成功。

关于javascript - 当跟进请求的答案是 204 时,为什么 OPTIONS 请求会失败?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13321168/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com