Intercambio de recursos de origen cruzado (CORS) Control de acceso-Permitir-Origen

1. La política de seguridad del mismo origen del navegador.

Así es, este tipo lo hizo: el navegador solo permite solicitudes de recursos en el dominio actual y expresa desconfianza hacia los recursos en otros dominios. Entonces, ¿cómo se considera dominio cruzado?

1. http,httpsLa diferencia en el protocolo de solicitud.
2. domaindiferencia de dominio
3. portdiferencia de puerto

Ok, bueno, ese es probablemente el caso, hablemos de dos métodos bien regulados: CORSdocumento.dominio JSONP
, ventana.nombre, web sockets, simplemente deja de causar problemas, mala cintura :)

2. CORS salió a causar problemas

Este es un estándar desarrollado por los líderes del W3C y su nombre completo es "Intercambio de recursos entre orígenes". De hecho, la mayor parte de esto es trabajo del personal de back-end. Primero echemos un vistazo a todo el proceso, ¿qué pasó?

Antes de eso, debes saber 简单请求 复杂请求que estos dos niños

1. Solicitud simple:
   1): El método de solicitud solo puede ser: head, get, post
   2): Los campos permitidos en el encabezado de la solicitud: Accept, Accept-Language, Content-Language, Last-Event-ID
Content-Type: elija uno de application/x-www-form-urlencoded, multipart/form-data, text /plano

2. Solicitudes complicadas: Así es, si no cumples con lo anterior, ¡soy yo!

Solicitud sencilla:

Navegador: Oye, quieres cruzar dominios, ¿verdad? ¡Tengo que preguntarle al hermano del servidor si está dispuesto! Agregue originuna tarjeta brillante al encabezado de la solicitud

有个奇怪现象，谷歌游览器在非跨域情况下，也会发送origin字段

El campo de origen del encabezado de la solicitud es el dominio actual.

Servidor: Oye, ¿quién eres? Déjame ver tu origen, sí, cumple con mis requisitos, ¡déjalo ir! Por cierto, déjame decirte, ¡las reglas del viejo!

Entre ellos, el más importante es Access-Control-Allow-Originidentificar qué solicitudes de dominio están permitidas. Por supuesto, si el servidor falla, no existe ningún campo de este tipo, luego se activa XHRy onerrorluego verá el mensaje del navegador.xxx的服务器没有响应Access-Control-Allow-Origin字段

//指定允许其他域名访问
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，动态设置），3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
'Access-Control-Allow-Credentials:true'

Access-Control-Allow-OriginHay varios métodos de configuración mencionados en la primera línea anterior :

1. La configuración *es la más simple y grosera, pero el servidor definitivamente no lo hará por razones de seguridad, y si es *, el navegador no lo enviará cookies, incluso si su XHRconfiguración está configurada.withCredentials
2. Especifique el dominio, como se muestra en la figura anterior http://172.20.0.206, hay uno en el medio del sistema general nginx, por lo que se recomienda esto
3. Se establece dinámicamente como dominio de solicitud. Cuando varias personas colaboran, varios front-end se conectan a un fondo, lo cual es muy conveniente.

withCredentials: Indica si recibir cookies y enviar cookies, es decir, si el valor es falso , el navegador ignorará el XHRencabezado de respuesta , e incluso si hay cookies del sitio de destino, el navegador no las enviará.Set-Cookie

Solicitud compleja:

En el caso más común, cuando usamos puty deletesolicitamos, el navegador enviará optionuna solicitud (verificación previa) primero, pero a veces encontrará que no es así, que es de lo que hablaremos más adelante sobre el caché.

solicitud de verificación previa

A diferencia de la solicitud simple, la solicitud de opción tiene 2 campos más::
Access-Control-Request-Methodel método de solicitud de esta solicitud
Access-Control-Request-Headers: el campo de encabezado de solicitud personalizado de esta solicitud

Después de que el servidor pasa la verificación, responde:

//指定允许其他域名访问
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，动态设置），3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
'Access-Control-Allow-Credentials:true'
//预检结果缓存时间,也就是上面说到的缓存啦
'Access-Control-Max-Age: 1800'
//允许的请求类型
'Access-Control-Allow-Methods:GET,POST,PUT,POST'
//允许的请求头字段
'Access-Control-Allow-Headers:x-requested-with,content-type'

Aquí hay una nota: se devuelven todos los métodos de solicitud y encabezados de solicitud que cumplan con los requisitos del servidor, sin limitarse a esta solicitud Access-Control-Request-Method.Access-Control-Request-Headers我一次性告诉你了，别TM问我了

3. Hola a todos, soy Zha Zhahui, ven si eres hermano dei... 咖咖哒, soy JSONP

Bueno, el principio de jsonp: introduzca un archivo js a través de la etiqueta script. Después de que el archivo js se cargue correctamente, ejecutará la función que especificamos en el parámetro url y pasará los datos json que necesitamos como parámetro. ¡Es una especie de olor a devolución de llamada!

ejemplo:

<script src="http://example.com/data.php?callback=dosomething"></script>

<script type="text/javascript">
    function dosomething(jsondata){
        //处理获得的json数据
    }
</script>

uso de jquery

<script type="text/javascript">
    $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){
        //处理获得的json数据
    };
</script>

Ventajas y desventajas de JSONP Ventajas
: No está restringido por la política del mismo origen como la solicitud Ajax implementada por el objeto XMLHttpRequest; puede 兼容性更好ejecutarse en navegadores más antiguos sin el soporte de XMLHttpRequest o ActiveX; y una vez completada la solicitud, el resultado puede ser devuelto llamando a la devolución de llamada.

Desventajas: solo admite GETsolicitudes, pero no otros tipos de solicitudes HTTP como POST; solo admite solicitudes HTTP entre dominios y no puede resolver el problema de cómo realizar llamadas JavaScript entre dos páginas de diferentes dominios.

Enlace: https://www.jianshu.com/p/89a377c52b48