Descripción del problema de origen cruzado

Es posible que encuentres el siguiente mensaje de error:

ha sido bloqueado por la política CORS: no hay ningún encabezado 'Access-Control-Allow-Origin' presente en el recurso solicitado

Este error indica que el protocolo CORS ha bloqueado una solicitud a una determinada dirección porque falta el encabezado Access-Control-Allow-Origin en el recurso.

Análisis de problemas entre orígenes

La causa principal de los problemas de origen cruzado es que los navegadores, por razones de seguridad, restringen el acceso a recursos fuera del sitio actual.

Por ejemplo, considere un sitio web alojado en http://127.0.0.1:8080/ con una página determinada. Si accede a recursos desde el mismo sitio, no hay restricciones. Pero si intenta acceder a recursos desde un sitio diferente (por ejemplo, http://127.0.0.1:8081), el navegador bloqueará la solicitud.

Nota: Consideramos el protocolo, el dominio y el puerto como parte de la definición de un "mismo origen".

Los elementos con un atributo src, como las etiquetas img y script, no están sujetos a esta restricción.

Históricamente, cuando el front-end y el back-end no estaban separados, las páginas y las interfaces de solicitud existían bajo el mismo dominio y puerto. Luego, los navegadores permitirían que las solicitudes de una página alojada en un dominio soliciten recursos del mismo dominio.

Por ejemplo, http://127.0.0.1:8080/index.html puede solicitar libremente http://127.0.0.1:8080/a/b/c/userLit.

Hoy en día, con el front-end y el back-end separados en diferentes aplicaciones, esto no está permitido y provocará problemas de CORS.

¿Qué es el origen y el origen cruzado?

El origen (o fuente) consta del protocolo, dominio y número de puerto.

Una URL se compone de protocolo, dominio, puerto y ruta. Dos URL se consideran del "mismo origen" si su protocolo, dominio y puerto son todos idénticos. Cualquier diferencia en cualquiera de estos tres elementos constituye una solicitud de origen cruzado.

Considere las comparaciones entre orígenes para https://www.baidu.com/index.html:

¿Qué es la Política del Mismo Origen?

La Política del Mismo Origen es una característica de seguridad fundamental del navegador. Sin él, la funcionalidad normal de los navegadores podría estar en riesgo. La arquitectura web depende en gran medida de esta política y los navegadores la implementan para garantizar la seguridad.

La Política del Mismo Origen incluye:

1. Política DOM del mismo origen: evita la manipulación DOM de diferentes páginas de origen. Se aplica principalmente a escenarios de iframe de origen cruzado donde los iframes de diferentes dominios no pueden acceder entre sí.
2. XMLHttpRequest Política del mismo origen: prohíbe solicitudes HTTP a diferentes orígenes utilizando objetos XHR.

Resolver problemas de orígenes cruzados en Spring Boot

1. Crear un filtro para manejar CORS

En un proyecto donde el front-end y el back-end se implementan por separado, abordar CORS es crucial. Las cookies se utilizan para almacenar información de inicio de sesión del usuario y los interceptores Spring administran los permisos. Surgen problemas cuando el interceptor y CORS se procesan en el orden incorrecto, lo que provoca un error de CORS.

Una solicitud HTTP primero pasa por el filtro antes de llegar al servlet y luego al interceptor. Para garantizar que el procesamiento de CORS se produzca antes de la interceptación de la autorización, podemos colocar la configuración de CORS en un filtro.

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

2. Configurar CORS en WebMvcConfigurer

Si bien JSONP puede abordar problemas de origen cruzado en el front-end, solo admite solicitudes GET, lo cual es limitante en aplicaciones RESTful. En su lugar, puede manejar solicitudes de orígenes cruzados con el uso compartido de recursos entre orígenes (CORS) en el back-end. Esta solución no es exclusiva de Spring Boot y se ha utilizado en marcos SSM tradicionales. Lo configura implementando la interfaz WebMvcConfigurer y anulando el método addCorsMappings.

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .maxAge(3600);
    }
}

3. Configurar CORS en el controlador

Puede habilitar CORS para métodos de controlador específicos agregando la anotación @CrossOrigin a la anotación @RequestMapping. De forma predeterminada, @CrossOrigin permite todos los orígenes y métodos HTTP especificados en @RequestMapping.

@RestController
@RequestMapping("/account")
public class AccountController {

    @CrossOrigin
    @GetMapping("/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @DeleteMapping("/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

Comprensión de los parámetros de @CrossOrigin:

• @CrossOrigin sin parámetros permite el acceso a todas las URL.
• @CrossOrigin(origins = "http://127.0.0.1:8080") restringe el acceso a la URL especificada.
• Esta anotación se puede utilizar en clases o métodos.
• El atributo de valor u orígenes especifica las URL permitidas.
• maxAge indica la antigüedad máxima en segundos para la caché de solicitudes de verificación previa.
• enableCredentials indica si se permiten credenciales (cookies). El valor predeterminado es falso.
• AllowHeaders especifica los encabezados de solicitud permitidos.
• métodos especifica los métodos de solicitud permitidos; el valor predeterminado es GET, POST, HEAD.

Razones por las que @CrossOrigin podría no funcionar

1. La versión de Spring MVC debe ser 4.2 o superior para admitir @CrossOrigin.
2. Las solicitudes incorrectas pueden aparecer como problemas de origen cruzado debido a una respuesta incorrecta del servidor.
3. Si agregar @CrossOrigin encima de la anotación del Controlador aún genera problemas, una posible solución es especificar los métodos HTTP en @RequestMapping.

Ejemplo:

@CrossOrigin
@RestController
public class PersonController {

    @RequestMapping(method = RequestMethod.GET)
    public String add() {
        // some code
    }
}