如何在React和Spring Boot的Axios发布请求中添加CSRF令牌?

时间:2019-01-19 14:18:58

标签: reactjs spring-boot spring-security cors axios

我试图在Spring Boot和React中添加带有Spring Security JDBC身份验证的Login。我将cors过滤器配置添加到spring安全配置文件中以与CORS一起使用。禁用.csrf().disable()时可以登录。但是当我尝试使用csrf令牌发送相同的发布请求时,出现错误“ 在飞行前响应中,Access-Control-Allow-Headers不允许请求标头字段x-xsrf-token ”。 我尝试了其他questios中提供的解决方案,但对我不起作用。

响应头

HTTP/1.1 500
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Credentials: true
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
Content-Type: application/json;charset=UTF-8
Content-Language: en-US
Transfer-Encoding: chunked
Date: Sun, 20 Jan 2019 06:23:40 GMT
Connection: close

请求标头

POST /login HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 81
Access-Control-Allow-Origin: http://localhost:3000
Accept: application/json, text/plain, */*
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:3000/login
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cookie: JSESSIONID=5B64C3749B3DCBBB5072B827D59E8418 

表单数据

username: vk%40gmail.com
password: admin
_csrf: 30955a56-abb5-443a-a029-d6b371f16e5a

我发送csrf令牌来响应这样的应用

CsrfToken token = (CsrfToken)request.getAttribute(CsrfToken.class.getName());
map.put("csrf", token.getToken());

这是Cors过滤器配置

@Bean  
public CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("*"));
    configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"));
    configuration.setAllowCredentials(true);
    configuration.setAllowedHeaders(Arrays.asList("authorization", "Cache-Control", "content-type", "xsrf-token"));
    configuration.setExposedHeaders(Arrays.asList("xsrf-token"));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

此axios POST请求

  export const addProjectTask = (username,password,csrf,history) => async dispatch => {

   axios.post('http://localhost:8080/login', 
   Qs.stringify({
    username: username,
    password: password,
    }), {
    headers: { 
      xsrfCookieName: 'XSRF-TOKEN',
      xsrfHeaderName: 'X-XSRF-TOKEN',
      "X-XSRF-TOKEN": csrf,
     // Authorization: 'Bearer ' + csrf,
      "Content-Type": "application/x-www-form-urlencoded"
    }, 
    credentials: 'include',
    })
  .then(function (response) {
    console.log(response);
    history.push("/");  
  }) 
  .catch(function (error) {
    console.log(error);
  });
  };

我在这里做错了什么?

0 个答案:

没有答案