如何使用Spring Boot和Angular 7配置CSRF

Question

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

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

但似乎在Angular 7中并非如此（在文章中他们使用了角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令牌。

Answer 1

最后我发现了发生了什么。出于开发目的，我在Angualar应用程序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应用程序的代理配置。现在一切正常。