How to Fix CORS Errors When Calling Services Through Spring Cloud Gateway

As project architectures become more complex and new technologies are introduced, new problems arise; this article discusses a frontend call issue caused by a gateway.

Problem Occurrence

After the mall project was upgraded to a micro‑service architecture, a Spring Cloud Gateway was added. Frontend services were expected to call backend services through the gateway, but login attempts failed.

Problem Reproduction and Resolution

We use the mall-swarm codebase as an example.

Start the services mall-registry, mall-config, mall-gateway, and mall-admin in order.

Start the frontend project mall-admin-web.

Visit the login page; the OPTIONS request returns status 403, and login fails.

Checking the browser console reveals a CORS error, indicating that the gateway does not support cross‑origin requests.

Add a global CORS configuration to the mall-gateway service:

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsWebFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedMethod("*");
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
        source.registerCorsConfiguration("/**", config);
        return new CorsWebFilter(source);
    }
}

After restarting mall-gateway, the OPTIONS request succeeds, but a POST request still fails in the console.

The failure is caused by a duplicate global CORS filter in the mall-admin service. Removing that configuration resolves the issue.

//@Configuration
public class GlobalCorsConfig {
    /**
     * Allow cross‑origin calls
     */
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // allow all origins
        config.addAllowedOrigin("*");
        // allow credentials
        config.setAllowCredentials(true);
        // allow all headers
        config.addAllowedHeader("*");
        // allow all methods
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

Restarting the mall-admin service allows normal login.

Summary

When a frontend application calls services through a gateway, CORS issues can arise; the fix is to add a global CORS configuration to the gateway and remove any redundant CORS filters in other services.

Project URL

https://github.com/macrozheng/mall-swarm