获取 - 响应预检响应

时间:2017-07-30 00:06:30

标签: cors fetch-api preflight

我正在努力获取CORS,并获得授权:

const token = 'this.is.secret!';
fetch('http://corsserver/api/hello', {
    method: 'get',
    credentials: 'include',
    mode: 'cors',
    headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/x-www-form-urlencoded'
    }
}).then(response => {
  console.log(response);
}).catch(error => {
  console.log(error);
});

当我运行此请求时,Chrome会将标头设置为:

Request Method:OPTIONS

我查看了it's a preflighted request

我的意思是,这真的非常酷。但是,在预检回来后,我无法弄清楚如何发送实际请求!下一步是什么?如何发送GET请求?

我在这里遗漏了一些非常基本的东西。

1 个答案:

答案 0 :(得分:3)

如果GET请求成功,您的浏览器将自动发送实际的OPTIONS请求。但如果OPTIONS请求未成功,浏览器将永远不会发出GET请求。

并且没有其他办法让GET请求浏览器执行OPTIONS

因此,如果浏览器没有执行GET请求,则只能表示OPTIONS必须失败,您需要找出原因。浏览器应该将带有原因的消息记录到其devtools控制台,因此您应该首先检查(然后编辑/更新问题以添加该信息,或者发布一个新的单独的更具体的问题和错误消息)

关于问题可能是什么的猜测:服务器可能要求对OPTIONS请求进行身份验证。如果是这样,您需要修复它以便服务器不会 - 因为当浏览器发出OPTIONS请求时,它不会从您的代码发送Authorization标头+值。

实际上,在这种情况下,OPTIONS请求的全部目的是让浏览器询问,您是否可以获得包含Authorization请求标头的跨源请求?< / em>,并让服务器以指示是否允许Authorization标题的方式进行响应。

因此,必须将服务器配置为响应任何OPTIONS请求(至少来自允许的来源),并且需要2xx成功响应,而无需身份验证。

您知道服务器是否要求对该OPTIONS请求进行身份验证的方式是,如果您的浏览器正在记录的CORS错误消息显示OPTIONS响应的401状态。

在Node.js服务器环境中处理OPTIONS的示例代码:

if (req.method === 'OPTIONS') {
  res.send();
  return;
}

...使服务器发送200响应,没有响应正文,这就是你想要的。请注意,这明确允许所有OPTION请求。