对 Spring Gateway 的 Angular 请求请求的资源上不存在“Access-Control-Allow-Origin”标头答案

【问题标题】：Angular request to Spring Gateway No 'Access-Control-Allow-Origin' header is present on the requested resource对 Spring Gateway 的 Angular 请求请求的资源上不存在“Access-Control-Allow-Origin”标头
【发布时间】：2022-01-20 13:08:50
【问题描述】：

我有一个 Angular 应用程序，它试图通过 Spring Gateway 应用程序向微服务发送 GET 请求。

我已将微服务 (helloworld) 上的允许来源配置为允许来自 localhost:4200。如果我将 Angular 应用程序配置为使用 helloworld 直接 url，则请求成功并且我得到了我期望的响应。

我已经配置了我的 Spring Gateway 应用程序，以提供与 helloworld 应用程序对话的路径，并使用它自己作为中间人。这通过浏览器工作，我得到了和以前一样的成功响应。

但是，当我将 Angular 应用程序配置为通过 Spring Gateway 应用程序运行时...当 Angular 应用程序尝试通过 Spring Gateway 联系时，浏览器中出现错误：

来源“http://localhost:4200”已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：不存在“Access-Control-Allow-Origin”标头请求的资源。

所以是网关拒绝了请求，它永远不会到达 hello world 应用程序。这是网关应用程序的 yaml 配置：

server:
  port: 8080
spring:
  application:
    name: gateway-service
  cloud:
    gateway:
      discovery:
        locator:
          enabled: true
          lower-case-service-id: true
      globalcors:
        corsConfigurations:
      '[/**]':
          allowedOrigins: "http://localhost:4200"
          allowedMethods: 
          - POST
          - GET
          - OPTIONS
          allowCredentials: true
              

              
      routes:
      - id: hello
        uri: lb://helloworld
        predicates:
        - Path=/hello/*

eureka:
  client:
    fetch-registry: true
    register-with-eureka: false
    service-url:
      defaultZone: http://localhost:8761/eureka

这是我对网关服务的打字稿基本调用：

this.httpClient.get<string>('http://localhost:8080/hello/hi')
    .subscribe((response) => {
      console.log(response);
    }, error => {
      console.log(error);
    });

正如您所见，我使用 eureka 来解析应用程序，但这在浏览器中进行了测试。任何帮助将不胜感激。

===编辑=== 以下配置确保没有 Spring 安全依赖关系解决了该问题：

spring:
  application:
    name: gateway-service
  cloud:
    gateway:
      discovery:
        locator:
          enabled: true
          lower-case-service-id: true
      default-filters:
      - DedupeResponseHeader=Access-Control-Allow-Credentials Access-Control-Allow-Origin
      globalcors:
        corsConfigurations:
          '[/**]':
              allowedOrigins: "http://localhost:4200"
              allowedMethods: 
              - POST
              - GET
              - OPTIONS
              allowedHeaders: "*"
              allowCredentials: true

              
      routes:
#      - id: auth
#        uri: lb://java-api-workflow-auth
#        predicates:
#        - Path=/java-api-workflow-auth/*
      - id: hello
        uri: lb://helloworld
        predicates:
        - Path=/hello/*

【问题讨论】：

标签： angular cors spring-cloud-gateway

【解决方案1】：

确保没有 Spring 安全依赖的以下配置解决了该问题：

spring:
  application:
    name: gateway-service
  cloud:
    gateway:
      discovery:
        locator:
          enabled: true
          lower-case-service-id: true
      default-filters:
      - DedupeResponseHeader=Access-Control-Allow-Credentials Access-Control-Allow-Origin
      globalcors:
        corsConfigurations:
          '[/**]':
              allowedOrigins: "http://localhost:4200"
              allowedMethods: 
              - POST
              - GET
              - OPTIONS
              allowedHeaders: "*"
              allowCredentials: true

              
      routes:
#      - id: auth
#        uri: lb://java-api-workflow-auth
#        predicates:
#        - Path=/java-api-workflow-auth/*
      - id: hello
        uri: lb://helloworld
        predicates:
        - Path=/hello/*

【讨论】：