Configuración de CORS en Spring Security para APIs y Frontend

Cuando tu API en Spring Boot necesita ser consumida por un front-end alojado en un origen diferente, las peticiones serán bloqueadas por defecto. Entender cómo funciona CORS y configurarlo correctamente es fundamental para que tu aplicación web funcione sin problemas de seguridad ni errores inesperados en el navegador.

¿Qué es CORS y por qué Spring bloquea las peticiones de origen cruzado?

CORS (cross-origin resource sharing) es un mecanismo que permite a tu back-end decidir qué peticiones provenientes de otros orígenes puede aceptar y cuáles no [0:05]. Un origen se define por la combinación de protocolo, dominio y puerto. Por ejemplo, si tu front-end en Angular corre en localhost:4200 y tu API en localhost:8080, Spring los considera dos orígenes diferentes [1:28].

Por políticas de seguridad, Spring bloquea automáticamente cualquier petición de origen cruzado. Cuando intentas consumir tu API desde el navegador en un puerto distinto, verás un error en la consola indicando que la petición fue bloqueada por políticas de CORS [2:07].

¿Cómo habilitar CORS con la anotación CrossOrigin?

El primer paso para solucionar este bloqueo es habilitar CORS dentro de la configuración de Spring Security. En tu cadena de filtros de seguridad, después de deshabilitar CSRF, debes agregar .cors() y encadenar con .and() para continuar con el resto de la configuración [2:30].

Una vez habilitado a nivel global, puedes indicar en cada controlador qué orígenes específicos se permiten usando la anotación @CrossOrigin [3:06]:

java @CrossOrigin(origins = "http://localhost:4200") @GetMapping("/available") public ResponseEntity<List<Pizza>> getAvailable() { // lógica del método }

Con esta anotación, el método sabrá que las peticiones desde http://localhost:4200 deben ser permitidas. Sin embargo, si después de configurar CORS recibes un error 401, recuerda que tu back-end sigue requiriendo autenticación. Debes enviar el header de autorización correctamente desde tu front-end [3:30].

¿Cómo crear una configuración global de CORS para toda la API?

Anotar cada controlador con @CrossOrigin resulta tedioso cuando tienes muchos endpoints [4:28]. La solución es crear una configuración global mediante una clase dedicada.

¿Qué clase necesitas crear?

Dentro de tu paquete de configuración web, crea una clase llamada CorsConfig anotada con @Configuration [4:48]. Esta clase debe contener un método anotado con @Bean que retorne un CorsConfigurationSource:

java @Configuration public class CorsConfig {

@Bean
public CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration corsConfiguration = new CorsConfiguration();

    corsConfiguration.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
    corsConfiguration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE"));
    corsConfiguration.setAllowedHeaders(Arrays.asList("*"));

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

    return source;
}

}

¿Qué opciones puedes configurar?

Dentro del objeto CorsConfiguration tienes tres configuraciones principales [5:42]:

• setAllowedOrigins: define qué orígenes pueden hacer peticiones a tu API.
• setAllowedMethods: especifica qué métodos HTTP se permiten (GET, POST, PUT, DELETE).
• setAllowedHeaders: indica qué encabezados se aceptan. Usar el comodín * permite todos los headers.

El patrón "/**" en registerCorsConfiguration aplica estas reglas a todos los controladores de tu proyecto [5:30]. De esta forma, no necesitas anotar individualmente cada endpoint.

¿Cómo verificar que la configuración funciona?

Al relanzar tu aplicación, recuerda que Spring genera una nueva contraseña en cada inicio. Actualiza el token de autenticación en tu front-end y recarga la página [6:36]. Si la configuración es correcta, verás los datos de tu API renderizados sin errores de CORS en la consola del navegador.

Esta configuración global es la forma más limpia y mantenible de gestionar CORS en proyectos con Spring Security. Te permite definir en un solo lugar los orígenes, métodos y encabezados permitidos, manteniendo tu código organizado y seguro. ¿Has tenido problemas configurando CORS en tus proyectos? Comparte tu experiencia.