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

Question

我在我的 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 时开始收到以下错误：

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

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

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

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

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

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

标签： javascriptnode.jsauthenticationcorspreflight

Answer 1

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