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

【问题标题】：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 标头的授权？

【问题讨论】：

标签： javascript node.js authentication cors preflight

【解决方案1】：

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

【讨论】：

成功！非常感谢。