如何使用 Spring Boot 和 Angular 7 配置 CRSF答案

【问题标题】：How to configure CRSF with Spring Boot and Angular 7如何使用 Spring Boot 和 Angular 7 配置 CRSF
【发布时间】：2019-09-18 20:48:36
【问题描述】：

我正在阅读来自Spring.io sight 的 Spring Boot 和 Angular 文章。登录页面部分，添加注销部分。我在配置 CRSF 时遇到问题。他们写这个

最后一个选择是最好的，因为 Angular 已经内置了对基于 cookie 的 CSRF（它称之为“XSRF”）的支持。

但在 Angular 7 中似乎并非如此（在文章中他们使用 Angular 4）。因为当我在 CsrfFilter 中设置断点时，doFilterInternal 方法返回一个空 CRSF 令牌，浏览器响应为

{"timestamp":"2019-04-30T08:15:16.593+0000","status":403,"error":"Forbidden","message":"Forbidden","path":"/api/logout"}

我尝试添加

HttpXsrfTokenExtractor

对于应用程序的 Angular 部分，然后在发送请求时像这样设置 X-XSRF-TOKEN

const token = this.tokenExtractor.getToken();
    this.httpClient.post('api/logout', {}, {headers: new HttpHeaders().set('X-XSRF-TOKEN', token)}).pipe(finalize(() => {
      this.userService.user.authenticated = false;
      this.userService.user.name = '';
      this.router.navigateByUrl('login');
    })).subscribe();

但我得到了这个错误

ERROR TypeError: Cannot read property 'length' of null
    at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.applyUpdate (http.js:241)
    at http.js:212
    at Array.forEach (<anonymous>)
    at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.init (http.js:212)
    at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.forEach (http.js:277)
    at Observable._subscribe (http.js:1529)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29)
    at subscribeTo.js:21
    at subscribeToResult (subscribeToResult.js:11)

我并没有低估它。

我希望我可以注销，并且 CsrfFilter.class 将向我显示实际的 CSRF 令牌。

【问题讨论】：

看起来像 JavaScript，而不是 Java

标签： java angular typescript spring-boot csrf

【解决方案1】：

我终于知道发生了什么事。出于开发目的，我在 Angular 应用程序 proxy.conf.json 中设置了我的所有请求都应该代理到 Spring Boot 应用程序，因为由于 Angualr 应用程序中的动态重新加载内容，我分别开发了两个应用程序，但最终我想要一个应用程序。使用 maven-fronten-plugin 我构建了 Angular 应用程序并将 dist 文件夹复制到 Spring Boot 中的静态内容。 proxy.conf.json 是

{
  "/api/*": {
    "target": "http://localhost:8080",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

我不知道我可以只输入“/**”来代理我的所有呼叫。所以在 Spring Boot 应用程序中，我在应用程序属性中设置了

server.servlet.context-path=/api

看来这个配置有些怎么打破正常流量了。所以我从 Spring Boot 应用程序中删除了上下文路径并更改了 Angular 应用程序的代理配置。现在一切正常。

【讨论】：