为啥我在 Spring Boot 中从服务器端配置并做出反应时出现 CORS 错误？

Posted 2023-03-04

【中文标题】为啥我在 Spring Boot 中从服务器端配置并做出反应时出现 CORS 错误？

【英文标题】：Why I am getting CORS error though i configured from server side in spring boot and react?为什么我在 Spring Boot 中从服务器端配置并做出反应时出现 CORS 错误？

【发布时间】：2021-09-22 18:01:41

【问题描述】：

在我的服务器端应用程序中，我已经像这样全局启用了 CORS。

@Bean
    public WebMvcConfigurer corsConfigurer() 
        return new WebMvcConfigurer() 
            @Override
            public void addCorsMappings(CorsRegistry registry) 
                registry.addMapping("/**")
                        .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD", "PATCH")
                        .allowedHeaders("*")
                        .allowedOrigins("*");
            
        ;
    

我的客户端应用程序在 react 和 useEffect 挂钩中运行，我正在调用这样的后端 API。

useEffect(() => 
    async function fetchData() 
      const dataArray = await axios(
        url: "http://localhost:9001/getAllCompany/7",
        method: "GET",
        headers:  'Authorization': "Bearer " + authctx.token ,
      );

      setCompany(dataArray.data);
      return dataArray;
    
    fetchData();
  , [authctx.token]);

虽然我启用了 cors，但 API 调用不起作用并且网络调用显示如下

我该如何解决这个问题？

【参考方案1】：

我们在处理 Spring Security 时会遇到一些情况。此时我们必须添加 http.cors();在安全配置类中。

@Override
    protected void configure(HttpSecurity http) throws Exception 
        http.cors();
        http.csrf().disable()
                .authorizeRequests().antMatchers("/user").hasRole("USER")
                .antMatchers("/admin").hasAnyRole("ADMIN")
                .antMatchers("/company/login", "/register","/subscribe/userId", "/addDataRequest/userId").permitAll().anyRequest().authenticated()
    .and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).
                and().addFilterBefore(jwtFilter, UsernamePasswordAuthenticationFilter.class);
    

这对我有用。

【参考方案2】：

我猜你忘记在allowedMethods 块中添加OPTIONS。这就是您从浏览器发出的飞行前请求失败并且无法按预期工作的原因。

参考我的旧答案：https://***.com/a/63202865/7200018