Angular 角形4罐'；t在报头中设置CSRF-TOKEN_Angular_Spring Security

Angular 角形4罐'；t在报头中设置CSRF-TOKEN

angular spring-security

Angular 角形4罐'；t在报头中设置CSRF-TOKEN,angular,spring-security,Angular,Spring Security,我有一个Spring boot RESTful服务，Spring security的配置如下： protected void configure(HttpSecurity httpSecurity) throws Exception { httpSecurity.cors().and() /*.formLogin().loginPage("/auth") .permitAll().and()

我有一个Spring boot RESTful服务，Spring security的配置如下：

protected void configure(HttpSecurity httpSecurity) throws Exception {
        httpSecurity.cors().and()
                /*.formLogin().loginPage("/auth")
                .permitAll().and()
                .authorizeRequests()
                .anyRequest()
                .authenticated()
                .and().httpBasic().and()*/
                .csrf()
                .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
                .and()
                .addFilterAfter(new CsrfHeaderFilter(), CsrfFilter.class);
    }

}

我正在使用Angular 4（最新版本）调用RESTful服务。它正在执行post请求一个投诉并抛出一个403禁止“无法验证提供的CSRF令牌，因为找不到您的会话”。这是预期的，因为我在发送post请求时没有设置X-CSRF-token头，但此头确实存在：- 设置Cookie:XSRF-TOKEN=；路径=/

角度：

auth.service.ts：

const body = 'SOMERANDOMKEY1111';

const headers = new HttpHeaders().set('Content-Type', 'application/json').set('withCredentials', 'true');

    return this._http.post(this.endpoint + this.auth, body, {
      headers: headers
    });

app.module.ts（注意：使用HttpClient进行post请求）：

我已经关注并阅读了文档，但似乎无法使其正常工作。

禁止响应，因为spring服务器或您的代理将在标头中接收X-CSRF令牌，而您没有发送它

1.请确保您正在使用POST（登录时）方法来接收CSRF-TOKEN

2.将收到的令牌存储在Cookie或localstorage中

3.制作帖子并将令牌添加到标题中，如下所示：

let headers = new Headers({ 'XSRF-TOKEN', 'the token received after login' });
let options = new RequestOptions({ headers: headers });
return this.http.post(url,body,options);

此响应被禁止，因为spring服务器或您的代理将在标头中接收X-CSRF令牌，而您没有发送它

1.请确保您正在使用POST（登录时）方法来接收CSRF-TOKEN

2.将收到的令牌存储在Cookie或localstorage中

3.制作帖子并将令牌添加到标题中，如下所示：

let headers = new Headers({ 'XSRF-TOKEN', 'the token received after login' });
let options = new RequestOptions({ headers: headers });
return this.http.post(url,body,options);

如果您的

Angular UI

和RESTful服务位于不同的域中，则Angular代码无法读取后端设置的cookie。要在本地工作区中解决此问题，您可以但对于生产，如果您使用的是ApacheHTTP服务器，则需要设置反向代理。以下是一个例子：

对于https


服务器名本地主机
斯伦金安
SSLProxyEngine打开
sslcertificatefileconf/ssl/newfile.crt
SSLCertificateKeyFile conf/ssl/newfile.key
ProxyPass/api/https://yoursite/api/
ProxyPassReverse/api/https://yoursite/api/

对于http


服务器名本地主机
ProxyPass/api/http://yoursite/api/
ProxyPassReverse/api/http://yoursite/api/

如果您的

Angular UI

对于https


服务器名本地主机
斯伦金安
SSLProxyEngine打开
sslcertificatefileconf/ssl/newfile.crt
SSLCertificateKeyFile conf/ssl/newfile.key
ProxyPass/api/https://yoursite/api/
ProxyPassReverse/api/https://yoursite/api/

对于http


服务器名本地主机
ProxyPass/api/http://yoursite/api/
ProxyPassReverse/api/http://yoursite/api/

当我开始使用Spring和angular5时，我也遇到了同样的问题：

问：如何在angular发出的每个请求上设置X-CSRF令牌

索尔：服务器端：

首先，您需要在服务器端配置csrf安全性
在服务器端，您需要编写一个在浏览器上设置cookie的api（cookie中的X-CSRF令牌），并且该api在没有任何安全性的情况下运行（在此api上禁用CSRF，假设api名称/信息）

注意：/info首次加载angular应用程序时，此api仅调用一次（您需要在angular应用程序中加载的第一页中添加此api）

角边：

当应用程序加载到angular的第一页/组件时，在oninit中，您需要调用此路由“/info”（您需要在angular中创建服务并在那里调用此api）我在我的布局/导航栏组件上设置了这个，因为当加载应用程序时，这个组件是第一个加载的组件
然后在app.module.ts内部我们需要导入

从'@angular/common/http'导入{HttpClientModule}

并将此模块添加到导入阵列中，如下所示：

@NgModule({   imports: [
                     HttpClientXsrfModule.withOptions({
                     cookieName: 'XSRF-TOKEN',
                     headerName: 'X-XSRF-TOKEN',
         })]

-然后，在服务内部，您需要如下更改请求：user.service.ts

 registeruser(data) {
    console.log(data)
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers, withCredentials: true });
    return this.http.post(this.url + '/avssymbuaa/api/register', data, options).map(res => res.json());
  }

注意：您需要在服务上导入此项

导入{Http、头、请求选项、响应、URLSearchParams} 来自“@angular/http”

也许这本书对你有帮助，谢谢