在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);
  }
}
 

但似乎 headers 數組是空的。

如何在 HttpInterceptor 中獲取所有這些標頭？ 有沒有其他方法可以得到它們？

Answer 1

在 Angular 的標頭中，您只能找到那些在編寫請求時由開發人員附加的標頭。 所以它們通常是空的，或者開發人員添加的項目很少。

在提供的屏幕截圖中，這些是瀏覽器特定的標頭，當請求 go 發出且無法通過 JS 訪問時，這些標頭會隱式添加到請求中。

但是，根據您的需要，您可能能夠使用瀏覽器 API 訪問所需的信息，例如確定您正在運行的代理或類似的。

另一種選擇可能是 echo API 端點，它將收集收到的所有標頭並將它們返回到響應正文中，盡管我不確定它是否值得。

Answer 2

不可能。 正如@Sergey 所說的那樣。

解決方案應該是您在本地環境中所做的。 通過為您的應用程序添加一個后端服務器。 然后所有請求都將通過您的后端服務器。

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

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

使用此解決方案，您還將獲得其他好處，例如負載平衡，甚至是 CORS 機制的應用程序安全性，以使您的服務器公開服務。