在 Angular 中的 HttpInterceptor 中获取请求标头

Question

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

如果我在开发中使用代理服务器，那么任务就很简单。我只是用内容创建 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;

它返回所有标头。

但不幸的是，这个解决方案在生产中不起作用，因为代理仅适用于 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);
  }
}
 

但标题数组似乎是空的。

如何获取 HttpInterceptor 中的所有这些标头？还有其他方法可以得到它们吗？

Answer 1

在 Angular 的标头中，您只能找到开发人员在编写请求时附加的标头。因此它们通常是空的或者开发人员添加的项目很少。

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

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

另一个选择可能是 echo API 端点，它会收集收到的所有标头并在响应正文中返回它们，尽管我不确定它是否值得。