Spring Boot 和 VueJs - 如何在发布请求之前设置 CSRF 令牌

Question

我只想在客户端启用 CSRF 保护。

服务器运行在 localhost:8080，VueJs 运行在 localhost:8081

问题是，我无法在 cookie 中设置 csrf 令牌。 我的第一个 post 请求在标头中返回响应Set-Cookie XSRF-TOKEN=f4610dc4-4119-4e ，但由于以下错误，我无法完成请求：

 o.s.security.web.csrf.CsrfFilter         : Invalid CSRF token found for http://localhost:8080/api/post

如何在发布请求之前在 cookie 中设置 csrf？

安全配置：

@Override
    protected void configure(HttpSecurity http) throws Exception {
       http.csrf(c -> {
            c.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
        });

        http.cors().and()
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                .and()
                .authorizeRequests()
                .antMatchers(allowedEndpoints()).permitAll()
                .anyRequest().authenticated();
        http.addFilterBefore(authTokenFilter(), UsernamePasswordAuthenticationFilter.class);
    }

@Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowedOrigins(Collections.singletonList(CorsConfiguration.ALL));
        corsConfiguration.setAllowedMethods(Collections.singletonList(CorsConfiguration.ALL));
        corsConfiguration.setAllowedHeaders(Collections.singletonList(CorsConfiguration.ALL));
        corsConfiguration.setMaxAge(Duration.ofMinutes(10));
        corsConfiguration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }

在 Vuejs 中，这是 axios 设置：

const api = axios.create({ baseURL: "http://localhost:8080/api" });

// create axios interceptor for the baseUrl ..8080/api
api.interceptors.request.use(
  function (config) {
    // Do something before request is sent
    console.log("axios: " + config.url);
    config.headers.common["X-XSRF-TOKEN"] = getCookieWithName("XSRF-TOKEN");
    return config;
  },
  function (error) {
    // Do something with request error
    return Promise.reject(error);
  }
);
// post request part

postReq(jwt) {
    return api.post("/post", {
      headers: {
        Authorization: "Bearer " + jwt,
      },
      withCredentials: true,
    });
  }