如何在 Angular 通用 Httpclient Xhr 调用中设置“Referer”标头？答案

【问题标题】：How to set "Referer" header in Angular universal Httpclient Xhr calls?如何在 Angular 通用 Httpclient Xhr 调用中设置“Referer”标头？
【发布时间】：2021-03-27 02:45:10
【问题描述】：

我有一个 Angular Universal SSR 应用程序，它使用 HttpClient 从 API 服务器获取数据。一切正常，我可以在服务器端渲染数据。

问题是我想在 CSR 中拥有浏览器默认设置的客户端Referer，并根据每个站点发送数据（我有多个具有不同域的站点）。

我得到这样的推荐人：

import { isPlatformBrowser } from '@angular/common';
import { REQUEST } from '@nguniversal/express-engine/tokens';
...

if (!this.isBrowser) {
  const serverRequest = this.injector.get(REQUEST) as Request;
  this.referer = `${serverRequest.protocol}://${serverRequest.get('Host')}`;
  console.log('refrerr is : ',this.referer) 
}

然后我将它设置在我的标题中：

request = req.clone({
    url: `${this.Config.url}${req.url}`,
    setHeaders: {
      referer: this.referer,
    },
    params
  });

但我在控制台中得到了这个错误：

拒绝设置不安全的标头“referer”

【问题讨论】：

此标头不应由 javascript 设置。它由浏览器自动添加，无需任何自定义代码
@Andrei 感谢您的回答。但是我在服务器端渲染我的应用程序，我不知道如何获取哪个客户端正在请求数据？
似乎如此。可以从访问令牌中检索此信息吗？
@Andrei 不，它与用户登录等无关。我希望根据域引用更改将第一个内容呈现给客户端。甚至是机器人和爬虫。

标签： angular express xmlhttprequest angular-universal referer

【解决方案1】：

试试这个

npm install xhr2

然后在您的server.ts 文件中

import * as xhr2 from 'xhr2';

//...
xhr2.prototype._restrictedHeaders = {};

【讨论】：