获取 - 响应预检响应

Question

我正在努力通过授权获取 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 将 header 设置为：

Request Method:OPTIONS

我查了一下，it's a preflighted request。

我的意思是，这真的很酷。但是我不知道如何在预检返回后发送实际请求！下一步是什么？如何发送 GET 请求？

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

Answer 1

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

如果浏览器不执行 OPTIONS 请求，就无法发出 GET 请求。

因此，如果浏览器没有执行 GET，那只能意味着 OPTIONS 一定失败了，您需要找出原因。浏览器应该在其 devtools 控制台中记录一条消息，其中包含原因，因此您应该首先检查那里（然后 edit/update 添加该信息的问题，或者 post 一个新的单独的 more-specific 带有错误信息的问题）。

猜测可能是什么问题：可能服务器要求对 OPTIONS 请求进行身份验证。如果是这样，您需要修复它以使服务器不这样做——因为当浏览器发出 OPTIONS 请求时，它不会从您的代码中发送 Authorization header+ 值.

事实上，在这种情况下，OPTIONS 请求的全部目的是让浏览器询问，你可以接受具有 [= 的 cross-origin 请求吗？ 21=] 请求 header?，并让服务器以指示是否允许 Authorization header.

的方式进行响应

因此，服务器必须配置为使用 2xx 成功响应来响应任何 OPTIONS 请求（至少来自允许的来源），而不需要身份验证。

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

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

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

…让服务器发送一个没有响应的 200 响应 body，这正是您想要的。请注意，这明确允许所有 OPTION 请求。

获取 - 响应预检响应

Fetch - respond to preflight response

javascript

cors

preflight

fetch-api