为 Spring Cloud Gateway 配置 CORS

Question

我有一个在本地运行的 React 应用程序，并且 Spring Cloud Gateway 作为 BE 在远程 VPS 上运行。我收到此错误：

Access to XMLHttpRequest at 'http://11.1.1.5:8080/api/business_structure' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我尝试在 Spring Cloud Gateway 中配置 CORS：

application.yml

spring:
  application:
    name: service
  cloud:
   gateway:
    globalcors:
     cors-configurations:
      '[/*]':
        allowedOrigins:
          - "*"
          - "http://localhost:3000"
        allowedMethods:
          - GET
          - POST

但它不起作用。我很感兴趣为什么在我的情况下会出现此错误？ FE 和 BE 在不同的主机上运行。

我该如何解决这个问题？

Answer 1

我通过定义一个新的 bean CorsConfigurationSource 来配置它。例如：

  @Bean
  public CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration apiCorsConfiguration = new CorsConfiguration();
    apiCorsConfiguration.setAllowCredentials(true);
    apiCorsConfiguration.setAllowedOriginPatterns(Collections.singletonList("*"));
    apiCorsConfiguration.setAllowedHeaders(Collections.singletonList("*"));
    apiCorsConfiguration.setAllowedMethods(Collections.singletonList("*"));

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

但我认为你的配置是错误的。你有'[/*]':，但它应该是'[/**]':

Answer 2

可能缺少一个额外的 *。类似的东西

spring:
  cloud:
    gateway:
      globalcors:
        corsConfigurations:
          '[/**]':
            allowedOrigins: "http://mywebsite.com"
            allowedHeaders: "*"
            allowedMethods:
            - GET
            - POST
            - PUT

您是否还通过 --proxy-conf 运行您的 FE 应用程序来重定向？我不是精通FE，但不要使用changeOrigin: true。如果您必须使用changeOrigin: true，它只适用于 GET，而对于其他人，您可能需要执行类似this 的操作。