在 Angular 中的 HttpInterceptor 中获取请求 headers

Question

我有一个 Angular 应用程序正在生产中。它的 http 请求包含在环境 headers 中，所以我想获取所有请求 headers 以提取一些有用的信息。

如果我在开发中使用代理服务器那么任务就简单了。我只是用内容

创建了 proxy.conf.js

const PROXY_CONFIG = {
  '/context.json': {
    'bypass': function (req, res, proxyOptions) {
      const objectToReturn = {
        headers: req.headers
      };
      res.end(JSON.stringify(objectToReturn));
      return true;
    }
  }
}

module.exports = PROXY_CONFIG;

它returns全部headers。

但不幸的是，此解决方案在生产中不起作用，因为代理仅用于 Angular 中的开发。所以我现在尝试使用HttpInterceptor。

@Injectable()
export class HttpConfigInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('headers in interceptor', req.headers);
    return next.handle(req);
  }
}

但是 headers 数组似乎是空的。

如何在 HttpInterceptor 中获取所有这些 headers？有没有其他方法可以得到它们？

Answer 1

在 Angular 的 headers 中，您只能找到开发人员在撰写请求时附加的那些 headers。所以它们通常是空的，或者只有很少的开发人员添加的项目。

在提供的屏幕截图中，那些是特定于浏览器的 headers 当请求发出时隐式添加到请求中并且无法通过 JS 访问。

但是，根据您的需要，您也许可以使用浏览器访问所需的信息 API，例如确定您运行使用的代理人或类似代理人。

另一个选项可能是一个 echo API 端点，它将收集所有收到的 Headers 和 return 它们在响应 body 中，尽管我不确定它是否是值得。

Answer 2

不可能。正如@Sergey 所说。

解决方案应该是您在本地环境中所做的。通过为您的应用程序添加一台后端服务器。然后所有请求都将流经您的后端服务器。

 Before: (frontend) --- request ---> other application(s)

 After: (frontend) --- request ---> backend server (proxy) --->  other application(s)

使用此解决方案，您还将获得其他好处，例如负载平衡，甚至是 CORS 机制的应用程序安全性，使您的服务器公开服务。

在 Angular 中的 HttpInterceptor 中获取请求 headers

Get request headers in HttpInterceptor in Angular

http

http-headers

angular