获取 - 响应预检响应

dth*_*ree 4 javascript cors preflight fetch-api

我正在努力通过 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);
});
Run Code Online (Sandbox Code Playgroud)

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

Request Method:OPTIONS

我查了一下,这是一个预检请求

我的意思是,这真的很酷。但是,我不知道如何在预检回来后发送实际请求,好吧!下一步是什么?如何发送 GET 请求?

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

sid*_*ker 7

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

GET如果浏览器不执行OPTIONS请求,就没有其他方法可以发出该请求。

因此,如果浏览器没有执行GET请求,则只能意味着OPTIONS必须失败,您需要找出原因。浏览器应该在它的 devtools 控制台中记录一条带有原因的消息,所以你应该从检查那里开始(然后编辑/更新问题以添加该信息,或者发布一个带有错误消息的新的单独的更具体的问题) .


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

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

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

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


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

if (req.method === 'OPTIONS') {
  res.send();
  return;
}
Run Code Online (Sandbox Code Playgroud)

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