Configure CORS for Spring Cloud Gateway

Question

I have a React application which is running locally and Spring Cloud Gateway as BE running on a remote VPS. I get this error:

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.

I tried to configure CORS in Spring Cloud Gateway:

application.yml

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

But it's not working. I'm interested why I get this error in my case? FE and BE are running on different hosts.

How I can fix this issue?

score 0 · Answer 1 · answered Jan 04 '22 at 15:51

I configured it by defining a new bean CorsConfigurationSource which is used. For example:

  @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;
  }

But I think that your configuration is wrong. You have there '[/*]': but it should be '[/**]':

Full code: https://github.com/rcbandit111/Spring_Cloud_Gateway_POC — Peter Penzov, Jan 05 '22 at 01:08

score 0 · Answer 2 · answered Jan 08 '22 at 00:47

0

Maybe an extra * is missing. Something like

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

Also are you running your FE app via --proxy-conf to redirect? I am not a well versed in FE, but dont use changeOrigin: true. If you have to to use changeOrigin: true, it will only work for GET and for others you might have to do something like this.

answered Jan 08 '22 at 00:47

Dhananjay

1,140
1
12
28

I get `Access to XMLHttpRequest at 'http://1.1.1.1.:8080/api/merchants/onboarding/currencies' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.` – Peter Penzov Jan 08 '22 at 02:45
Do you know some other solution? The the thing is that I run the FE React app on my local PC and Spring Cloud Gateway on separate server. CORS should not block it. – Peter Penzov Jan 08 '22 at 03:00
Quick update: I get this error only for POST request. GET reqest are working fine. – Peter Penzov Jan 08 '22 at 03:07
I only got this kind of scenario, when I was using --proxy-conf when running my angular app. Are you sure about the package.json script, thats its not using any proxy? – Dhananjay Jan 08 '22 at 03:13
Yes, this is the content of package.json file: https://pastebin.com/021R4emp – Peter Penzov Jan 08 '22 at 03:31
If the call is direct from browser, the configuration should work IMO. Can you also add `allowedHeaders: "*"` in gateway configuration and check – Dhananjay Jan 08 '22 at 03:46

Configure CORS for Spring Cloud Gateway

2 Answers2