Error de dominio cruzado
El dominio cruzado es la restricción del navegador sobre la política del mismo origen de JavaScript.
** Si el nombre de dominio y número de puerto son los mismos, pero diferente ruta de solicitud, no a través de dominios,
por ejemplo: www.gshop.com/goods; www.gshop.com/category
HTTP y también un multidominio https
manage.gshop.com ; api.gshop.compertenecen multidominio
¿Por qué hay problemas entre dominios?
El problema entre dominios es una restricción de seguridad del navegador en las solicitudes Ajax, por lo que una solicitud Ajax iniciada por una página solo puede tener la misma ruta que el nombre de dominio de la página actual, lo que puede prevenir eficazmente los ataques entre dominios.
Por lo tanto, el problema de dominio cruzado es una limitación para Ajax.
¿Cómo resolver problemas entre dominios?
Actualmente, existen tres soluciones de dominio cruzado de uso común:
-
Jsonp
La primera solución, el principio de dominio cruzado, se puede realizar mediante el uso de etiquetas de script.
límite:
- Necesita soporte de servicio
- Solo puede iniciar solicitudes GET
-
Proxy inverso Nginx
La idea es: usar nginx para revertir el proxy entre dominios como no entre dominios y admitir varios métodos de solicitud
Desventajas: se requiere configuración adicional en nginx y la semántica no es clara
-
CORAZONES
Solución de solicitud de dominio cruzado estandarizada, segura y confiable.
Ventaja:
- Controle si se permite el dominio cruzado en el lado del servidor y personalice las reglas
- Admite varios métodos de solicitud
Desventajas:
- Generará solicitudes adicionales
Usaremos la solución de dominio cruzado de cors aquí.
CORS resuelve dominios cruzados
¿Qué es Cors?
CORS es un estándar W3C, el nombre completo es "Uso compartido de recursos de origen cruzado" (Uso compartido de recursos de origen cruzado).
Permite a los navegadores enviar XMLHttpRequestsolicitudes a servidores de origen cruzado , superando así la limitación de que AJAX solo se puede usar desde la misma fuente .
CORS debe ser compatible tanto con el navegador como con el servidor. Actualmente, todos los navegadores admiten esta función y el navegador IE no puede ser inferior a IE10.
-
Lado del navegador:
Actualmente, todos los navegadores admiten esta función (no disponible por debajo de IE10). El navegador realiza todo el proceso de comunicación CORS automáticamente y no requiere la participación del usuario.
-
Servidor:
No hay diferencia entre la comunicación CORS y AJAX, por lo que no es necesario cambiar la lógica empresarial anterior. Es solo que el navegador incluirá información de encabezado en la solicitud. Necesitamos juzgar si está permitido cruzar dominios en función de esto y luego agregar cierta información en el encabezado de respuesta. Esto generalmente se hace a través de un filtro.
Origin indicará a qué dominio pertenece la solicitud actual (protocolo + nombre de dominio + puerto). El servicio decidirá si permite el dominio cruzado en función de este valor. Si el servidor permite el dominio cruzado, debe incluirse en el encabezado de respuesta devuelto
Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true
Content-Type: text/html; charset=utf-8
- Access-Control-Allow-Origin : dominio aceptable, que puede ser un nombre de dominio específico o
*("*" representa cualquier nombre de dominio). - Access-Control-Allow-Credentials : ya sea para permitir que se lleven las cookies, de forma predeterminada, el núcleo no las llevará a menos que el valor sea verdadero
Para operar una cookie, se deben cumplir tres condiciones:
- El encabezado de respuesta del servicio debe incluir Access-Control-Allow-Credentials y ser verdadero.
- El navegador inicia ajax y necesita especificar withCredentials como verdadero.
- El Access-Control-Allow-Origin en el encabezado de la respuesta no debe ser *, debe ser el nombre de dominio especificado.
Solicitud especial
La solicitud especial agregará una solicitud de consulta HTTP antes de la comunicación formal, que se denomina solicitud de verificación previa.
El navegador primero pregunta al servidor si el nombre de dominio de la página web actual está en la lista de permisos del servidor y qué verbos HTTP y campos de encabezado se pueden usar. Solo cuando se recibe una respuesta positiva, el navegador enviará una solicitud formal; de lo contrario, informará un error.
Ejemplos:
OPTIONS /cors HTTP/1.1
Origin: http://manage.leyou.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.leyou.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
Además de Access-Control-Allow-Origin y Access-Control-Allow-Credentials, hay algunas más.
- Access-Control-Allow-Methods : Permitir métodos de acceso.
- Access-Control-Allow-Headers : encabezados permitidos
- Access-Control-Max-Age : La duración válida de esta licencia, en segundos. Las solicitudes Ajax antes de la expiración no necesitan ser revisadas nuevamente.
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class HshopCorsConfig {
@Bean
public CorsFilter corsFilter(){
CorsConfiguration configuration = new CorsConfiguration();
configuration.addAllowedOrigin("http://manage.gshop.com");
configuration.setAllowCredentials(true);//检测是否发Cookie
configuration.addAllowedMethod("GET");
configuration.addAllowedMethod("POST");
configuration.addAllowedMethod("DELETE");
configuration.addAllowedMethod("PUT");
configuration.addAllowedHeader("*");
UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
urlBasedCorsConfigurationSource.registerCorsConfiguration("/**",configuration); //2.添加映射路径，我们拦截一切请求
return new CorsFilter(urlBasedCorsConfigurationSource);
}
}
Resolver el problema de la interceptación entre dominios