CORS即使在配置中启用了我的请求，也会阻止我的请求

Question

嘿，我正在React建立一个网站，我尝试从春季构建的后端服务器中获取数据，但它行不通。我将CorsConfigurationsource添加到我的安全配置中，但它仍然无法使用。 我的CORS安全配置：

@Bean
CorsConfigurationSource corsConfigurationSource(){
     CorsConfiguration corsConfiguration=new CorsConfiguration();
     corsConfiguration.setAllowedOrigins(Arrays.asList("http://localhost:3000"));
     corsConfiguration.setAllowCredentials(true);
     corsConfiguration.setAllowedMethods(Arrays.asList("GET","POST"));
     UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
     source.registerCorsConfiguration("/**", corsConfiguration);
     return source;
}

我最终遇到的错误： https://i.sstatic.net /olgcd.png \ 我的提取请求（我正在发布用户凭据）：

fetch("http://localhost:8080/login", {
      method: "POST",
      mode:'cors',
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      body: new URLSearchParams(tempLoginCredentials),
    })

Answer 1

Google Chrome中的CORS在 localhost 上有点特别。
阅读有关它的更多信息。

最重要的是，港口确实在CORS中很重要。请注意，您在弹簧配置中启用了端口3000，但正在获取8080。

Answer 2

我认为您需要更多的标题和选项方法。

config.setAllowedHeaders(Arrays.asList("Origin", "Content-Type", "Accept", "Authorization"));
config.setAllowedMethods(Arrays.asList("GET", "POST", "OPTIONS"));