reactjs - 如何在反应和春季启动的axios发布请求中添加csrf令牌？

Question

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

响应头

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);
  });
  };

我在这里做错了什么？

标签： reactjsspring-bootspring-securityaxios