java - 如何使用 Spring Boot 和 Angular 7 配置 CRSF

Question

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

The last choice is the best because Angular has built in support for CSRF (which it calls "XSRF") based on cookies.

但在 Angular 7 中似乎并非如此(在文章中他们使用 Angular 4)。因为当我在 CsrfFilter 中放置断点时，方法 doFilterInternal 返回一个 null CRSF token ，并且浏览器响应为

{"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 token 。

Answer 1

终于知道是怎么回事了。 出于开发目的，我在 Angualr 应用程序 proxy.conf.json 中设置，我的所有请求都应代理到 Spring Boot 应用程序，因为由于 Angualr 应用程序中的动态重新加载内容，我分别开发这两个应用程序，但最终我想要一个应用程序。使用 maven-fronten-plugin 构建 Angual 应用程序并将 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 应用程序的代理配置。现在一切正常。