时间戳

首页 > 解决方案 > 如何在 Angular 通用 Httpclient Xhr 调用中设置“Referer”标头？

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

问题描述

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

问题是我希望在 CSR 中拥有默认浏览器设置的客户端引荐来源网址，并根据每个站点发送数据（我有多个具有不同域的站点）。

我得到这样的推荐人：

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”

标签： angularexpressxmlhttprequestangular-universalreferer

解决方案

尝试这个

npm install xhr2

然后在你的server.ts文件中

import * as xhr2 from 'xhr2';

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

推荐阅读