Home > other >  Angular request to Spring Gateway No 'Access-Control-Allow-Origin' header is present on th
Angular request to Spring Gateway No 'Access-Control-Allow-Origin' header is present on th

Time:12-18

I have a Angular application which is trying to send a GET request to a microservice via a Spring Gateway application.

I have configured allowed origin on the microservice (helloworld) to allow from localhost:4200. If I configure the angular application to use helloworld direct url, the request is successful and I get the response I am expecting.

I have configured my Spring Gateway application to provide and path to talk to the helloworld application using itself as the go between. This works via the browser and I get the same successful response as before.

However, when I configure the Angular application to go via the Spring Gateway application... I get an error in the browser when the Angular application tries to contact via Spring Gateway:

from origin 'http://localhost:4200' 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.

So it is the gateway rejecting the request and it never gets to the hello world application. Here is the yaml configuration for the gateway application:

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

Here is my typescript basic call to the gateway service:

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

I am as you can see using eureka to resolve the application but this works as tested from the browser. Any help would be much appreciated.

===EDIT=== The below configuration ensuring there is not Spring security dependency resolves the issue:

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/*

CodePudding user response:

Your CORS configuration suffers from a least two issues.

localhost:4200 is not an origin

The http:// part is missing at the start. Try allowedOrigins: "http://localhost:4200" instead. See

No wildcard allowed for credentialed requests

If you allow credentials, you can't use the wildcard (*) for allowing methods, headers, and/or an origin; instead, you must list allowed values explicitly. More details about this exception on the MDN Web Docs about CORS.

CodePudding user response:

The below configuration ensuring there is not Spring security dependency resolves the issue:

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/*
  • Related