angular - 在 Angular 中拦截 HTTP header

Question

设置:

我有一个遗留的 REST 应用程序，但我没有它的源代码。我还有一个附带的 JSP 应用程序，但我没有它的源代码。 jSP 应用程序调用后端 REST 应用程序。

我正在构建一个 Angular 应用程序来替换 JSP 前端。我已将 JSP 应用程序和 Angular 应用程序放置在同一个 tomcat 中，以避免任何 CORS 问题，JSP 应用程序将 Angular 应用程序嵌入到 iFrame 中，以便正确设置 Cookie。

问题:

当我对后端 REST 应用程序进行 POST 调用时，出现 403 错误。调试后我相信它归结为标题中的两行:

作品:

..other headers..
x-csrf-token: <CSRF-TOKEN>
Cookie: JSESSIONID=<SESSIONID>; x-csrf-token=<CSRF-TOKEN>
..other headers..

不起作用:

..other headers..
Cookie: JSESSIONID=<SESSIONID>; x-csrf-token=<CSRF-TOKEN>
..other headers..

所以看起来遗留 REST 应用程序正在验证 x-csrf-token key 。

问题:

我如何拦截 HTTP 请求中的 Cookie，以便提取 x-csrf-token 并将其设置为单独的项目？我试过 HttpInterceptor，但它在设置 Cookie 之前捕获了它。还尝试添加“withCredentials: true”，这也不起作用。

注意:我的 Angular 应用程序正在获取正确的 Cookie 集，这部分工作正常。但是缺少 csrf-token。

Answer 1

Angular HttpClient 已经有设置 CSRF token 的选项，参见 here .您可以配置 cookie 名称和 header 名称，HttpClient 将为所有 POST 请求设置 token 。

imports: [
  HttpClientModule,
  HttpClientXsrfModule.withOptions({
    cookieName: 'My-Xsrf-Cookie',
    headerName: 'My-Xsrf-Header',
  }),
],