[NuxtJS-Axios-春季]：未在第一个请求中设置X-XSRF-TOKEN标头

Question

我正在尝试使用auxios作为前端和spring作为后端的nuxtjs实现一个Web应用程序。使用请求标头中的XSRF-TOKEN cookie和X-XSRF-TOKEN，通过基本的auth和csrf保护来保护后端。

但是，我遇到以下问题：

• 当客户端向后端发送第一个请求时，预检请求将通过，但是实际请求失败，状态码为403
• 当客户随后发送第二个请求时，飞行前检查和实际请求都会通过

经过一些调试：

• 我注意到浏览器在第一个请求之后设置了XSRF-TOKEN cookie（我假设在预检请求之后）
• 实际请求（失败）不包含X-XSRF-TOKEN标头
• 因此，请求失败很有意义
• 第二个请求包含正确的X-XSRF-TOKEN标头

由于它通常可以工作，所以我不认为这是后端的问题。但是我不确定。我已经查看了文档，但找不到任何解决方案。

非常感谢您提供任何帮助。

先请求先请求 实际的首次请求 首次请求后的Cookie 第二个请求的优先请求 实际第二次请求 第二次请求后的Cookie

Axios请求实施

    return $axios({
      method: 'delete',
      url: 'todo/' + id,
      auth: credentials,
      withCredentials: true
    })

Spring Security配置

@Configuration
public class WebSecurityConfiguration extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests().antMatchers("/todo/**").authenticated().and().httpBasic();
        http.cors().and().csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
    }

    @Bean
    public UserDetailsService userDetailsService() {
        String username = "user";
        String password = "password";
        InMemoryUserDetailsManager manager = new InMemoryUserDetailsManager();
        String encodedPassword = passwordEncoder().encode(password);
        manager.createUser(User.withUsername(username).password(encodedPassword).roles("USER").build());
        return manager;
    }

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

Spring CORS配置

@Configuration
public class WebCorsConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/todo/**").allowedOrigins("http://localhost:3000").allowCredentials(true).allowedMethods("*");
    }

}