跨域访问场景无法发送鉴权Header

Question

我在我的 Node.js 服务器上启用了跨源通信，以便我的 Vue 应用程序可以从与提供静态资产的源不同的源访问它的 API。这是使用 Node.js 中的以下代码完成的：

res.setHeader('Access-Control-Allow-Origin', '*');

连同 Vue 中的以下 JavaScript 代码：

fetch(url);

在我引入基于 HTTP header 的身份验证之前，它工作得很好。通过该身份验证，Vue 中的 JavaScript 代码从上面更改为：

fetch(url, {headers: {'Authorization': bearer}});

引入授权 header 后，浏览器在尝试访问 API 时开始收到以下错误：

Access to fetch at 'https://localhost:8001/articles' from origin http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

因此，似乎引入 HTTP 授权 header 会导致预检请求无法通过预检测试。 Mozilla 文档似乎证实了这一观点：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

For requests without credentials, the literal value "*" can be specified, as a wildcard; the value tells browsers to allow requesting code from any origin to access the resource. Attempting to use the wildcard with credentials will result in an error.

那么，这是否意味着基于 HTTP header 的身份验证根本无法在跨源请求的情况下实现？

更重要的是，我如何在我的场景中实现基于 HTTP header 的授权？

Answer 1

如果您使用的是快速服务器，请查看此包 [1]: https://expressjs.com/en/resources/middleware/cors.html

跨域访问场景无法发送鉴权Header

Can't Send Authentication Header in Cross Origin Access Scenario

javascript

authentication

node.js

cors

preflight