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

Question

在我的服务器端应用程序中，我已经像这样全局启用了 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 调用不起作用，网络调用显示如下

我该如何解决这个问题？

标签： reactjsspringspring-bootcors

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

这对我有用。