你如何告诉 Angular 发送 Origin 标头？答案

【问题标题】：How can you tell Angular to send the Origin header?你如何告诉 Angular 发送 Origin 标头？
【发布时间】：2022-02-09 05:21:59
【问题描述】：

我有一个与我的服务器连接的 Angular 应用程序。出于内部原因，我希望能够将源域发送到服务器，因为它可以从几个地方访问，例如：

https://domain1.com/app https://domain2.com/app

为了做到这一点，我希望我的 Angular 应用程序设置 Origin 标头。我有一个拦截器，我试图做这样的事情：

return next.handle(req.clone({setHeaders: {Origin: environment.origin}}));

但是，它会引发一个错误，显示为 Refused to set unsafe header "Origin"。我明白为什么，但是我如何告诉 Angular 包含这个标头并将其设置为当前域（或者只是将其设置为通常的方式）？我不需要将它设置为任何特殊的东西，我只需要包含它。

【问题讨论】：

【解决方案1】：

我相信你应该设置的标题是Referer。这个标题的The usage description 非常适合您的场景。

您也可以使用完全自定义的标头跟踪服务器上的访问模式。

【讨论】：

【解决方案2】：

Origin 标头在跨域 Ajax 请求（以及其他一些跨域请求，例如字体请求或涉及 crossorigin 属性的请求）上自动发送（由浏览器发送）。

它不是针对同源请求发送的，并且您无法发送它，因为它是一个 Forbidden 标头（因此网站不能谎报 Origin 以绕过 CORS 检查）。

由于它设置为跨域请求，您可以将其不存在视为请求是同源请求的信号。而是进行测试。

显然，如果请求不是来自浏览器，那么它通常不会有 Origin 标头，但您不能依赖它来确保安全，因为请求的任何非浏览器来源都可以轻松伪造 Origin 标头.

【讨论】：

好的，非常感谢！我尝试了一些测试并没有在请求标头中看到它，所以我认为它没有被设置。但是，我认为它们是相同的起源，因此可以解释原因。我只是在 chrome 和 firefox 中尝试了一些跨源请求，它们似乎已经设置好了，所以我认为这给了我需要知道的东西！

【解决方案3】：

我们不能将前端的标头 Origin 设置为技术上禁止从 Angular 执行此操作。大多数浏览器都遵循same origin policy，不允许与不同的域进行交叉通信，只有在允许域从服务器访问时，这些限制才会放宽。

但是 CORS 问题只能通过服务器端通过将“Access-Control-Allow-Origin”设置为您要启用访问的任何域来解决。使用 Nodejs 的一些示例

const app = express(); app.use(function (req, res, next) {

// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'https://domain1.com/app');

/
next();

});

【讨论】：