Configure CORS in Spring Cloud Gateway (WebFlux & WebMVC)

Cross-Origin Resource Sharing (CORS) is a critical part of modern web application development. If your frontend application is running on a different domain (or port) than your backend API, you’ll encounter CORS errors unless you configure it properly. In Spring Cloud Gateway, CORS configuration depends on whether your project is using Spring WebFlux or Spring WebMVC. In this guide, we’ll look at how to configure CORS in Spring Cloud Gateway in both setups.

What is CORS and Why Do You Need It?

CORS is a browser security mechanism that restricts requests made from a different origin (domain, protocol, or port). Without proper CORS configuration, your frontend app (like Angular, React, or Vue) won’t be able to call your Spring Cloud Gateway API.

To allow safe cross-origin requests, we need to explicitly configure allowed origins, headers, and methods.

CORS in Spring Cloud Gateway with WebMVC

If your Spring Cloud Gateway project is based on Spring WebMVC, you can configure CORS using a CorsFilter bean.

Following is an example:

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

import java.util.List;

@Configuration
public class MvcGatewayCors {

	@Bean
	public FilterRegistrationBean<CorsFilter> corsFilter() {
		CorsConfiguration cfg = new CorsConfiguration();
		// exact origins you want to allow
		cfg.setAllowedOriginPatterns(List.of(
				"https://codersathi.com",
				"https://codersathi.com",
				"http://localhost",
				"http://localhost:*"
		));
		cfg.setAllowedMethods(List.of("GET","POST","PUT","DELETE","PATCH","OPTIONS"));
		cfg.setAllowedHeaders(List.of("*"));
		cfg.setAllowCredentials(false);     // set true only if you actually need cookies
		cfg.setMaxAge(3600L);

		UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
		source.registerCorsConfiguration("/**", cfg);

		FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<>(new CorsFilter(source));

		return bean;
	}
}

Key Points:

• Use setAllowedOriginPatterns() instead of setAllowedOrigins() if you need wildcard subdomains.
• Setting AllowCredentials to true should only be used if cookies or authentication headers are required.
• Register the filter at the highest precedence so CORS is applied before requests are routed.

CORS in Spring Cloud Gateway with WebFlux

For Spring WebFlux, you need to use a CorsWebFilter bean.

Following is an example configuration:

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Profile;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;


@Configuration
public class WebFluxCORSFilter {

	@Bean
	public CorsWebFilter corsWebFilterStaging() {
		CorsConfiguration corsConfig = new CorsConfiguration();
		corsConfig.addAllowedOrigin("http://localhost");
		corsConfig.addAllowedOrigin("http://localhost:4200");
		corsConfig.addAllowedOrigin("http://localhost:4201");
		corsConfig.addAllowedOriginPattern("*.codersathi.com");

		corsConfig.addAllowedMethod("*");
		corsConfig.addAllowedHeader("*");
		corsConfig.setAllowCredentials(true);
		UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
		source.registerCorsConfiguration("/**", corsConfig);
		return new CorsWebFilter(source);
	}
}

Key Points:

• CorsWebFilter is required in WebFlux, instead of CorsFilter.
• Use addAllowedOriginPattern() for wildcard domains (e.g., *.codersathi.com).
• If your frontend and backend share authentication (JWT cookies, sessions), you must enable AllowCredentials.

WebMVC vs WebFlux – Which One Are You Using?

• If your Spring Cloud Gateway project includes spring-boot-starter-web, it’s WebMVC.
• If it includes spring-boot-starter-webflux, it’s WebFlux.

Configuring the correct type of filter is essential—using the wrong one won’t resolve CORS issues.

Final Thoughts

Correct CORS configuration in Spring Cloud Gateway ensures your frontend and backend communicate smoothly across different domains.

• Use CorsFilter with WebMVC.
• Use CorsWebFilter with WebFlux.

By setting allowed origins, methods, and headers correctly, you can avoid common CORS errors like:

“Access to fetch at [API URL] from origin [Frontend URL] has been blocked by CORS policy.”

With this setup, your applications will be able to securely handle cross-origin requests in both local and staging/production environments.