跨域访问场景无法发送认证头

Posted 2023-02-27

【中文标题】跨域访问场景无法发送认证头

【英文标题】：Can't Send Authentication Header in Cross Origin Access Scenario

【发布时间】：2020-11-04 05:49:54

【问题描述】：

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

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

以及 Vue 中的以下 javascript 代码：

fetch(url);

在我引入基于 HTTP 标头的身份验证之前，这一直很好。使用该身份验证后，Vue 中的 JavaScript 代码从上面更改为：

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

一旦引入 Authorization 标头，浏览器在尝试访问 API 时开始收到以下错误：

从来源访问“https://localhost:8001/articles”获取 http://localhost:8080' 已被 CORS 策略阻止：响应 预检请求未通过访问控制检查：否 'Access-Control-Allow-Origin' 标头出现在请求的 资源。如果不透明的响应满足您的需求，请设置请求的 模式为“no-cors”以获取禁用 CORS 的资源。

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

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

对于没有凭据的请求，文字值“*”可以是 指定为通配符；该值告诉浏览器允许请求 来自任何来源的代码以访问资源。尝试使用 带有凭据的通配符将导致错误。

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

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

【参考方案1】：

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

【讨论】：

成功！非常感谢。