¿Qué es el dominio cruzado?
Concepto: mientras haya alguna diferencia en el protocolo, el nombre de dominio o el puerto, se considera un dominio diferente.
La copia del código es la siguiente:
URL indica si se permite la comunicación
http://www.a.com/a.js
http://www.a.com/b.js permitido bajo el mismo nombre de dominio
http://www.a.com/lab/a.js
http://www.a.com/script/b.js Se permiten diferentes carpetas bajo el mismo nombre de dominio
http://www.a.com:8000/a.js
http://www.a.com/b.js El mismo nombre de dominio, no se permiten diferentes puertos
http://www.a.com/a.js
https://www.a.com/b.js El mismo nombre de dominio, diferentes protocolos no permiten
http://www.a.com/a.js
http://70.32.92.74/b.js El nombre de dominio y el nombre de dominio corresponden a IP no están permitidos
http://www.a.com/a.js
http://script.a.com/b.js El dominio principal es el mismo, pero el subdominio no está permitido
http://www.a.com/a.js
http://a.com/b.js El mismo nombre de dominio, no están permitidos diferentes nombres de dominio secundario (igual que arriba) (no hay acceso a las cookies en este caso)
http://www.cnblogs.com/a.js
http://www.a.com/b.js no están permitidos diferentes nombres de dominio
La diferencia entre puertos y protocolos solo se puede resolver a través del fondo.
Intercambio de recursos de dominio cruzado (CORS)
CROS (intercambio de recursos de origen cruzado) El intercambio de recursos de dominio cruzado define cómo el navegador y el servidor deben comunicarse al acceder a los recursos de dominio cruzado. La idea básica detrás de CRO es usar un encabezado HTTP personalizado para permitir que el navegador se comunique con el servidor, decidiendo así si la solicitud o la respuesta deben tener éxito o fallarse.
La copia del código es la siguiente:
<script type = "text/javaScript">
var xhr = new xmlhttprequest ();
xhr.open ("get", "/trigkit4", true);
xhr.send ();
</script>
El TRIGKIT4 anterior es un camino relativo. Si queremos usar CORS, el código AJAX relevante puede verse así:
La copia del código es la siguiente:
<script type = "text/javaScript">
var xhr = new xmlhttprequest ();
xhr.open ("get", "http://segmentfault.com/u/trigkit4/",true);
xhr.send ();
</script>
La diferencia entre el código y el anterior es que la ruta relativa se reemplaza con la ruta absoluta de otros dominios, es decir, la dirección de interfaz que desea acceder a través de dominios.
El soporte del lado del servidor para CORS se logra principalmente estableciendo el origen de acceso de acceso de acceso. Si el navegador detecta la configuración correspondiente, AJAX puede acceder a los dominios.
Para resolver problemas de dominio cruzado, podemos usar los siguientes métodos:
Dominio cruzado a través de JSONP
¿Ahora la pregunta es? ¿Qué es JSONP? La definición de Wikipedia es: JSONP (JSON con PLATDE) es un "modo de uso" del formato de datos JSON, que permite que las páginas web soliciten información de otros dominios.
JSONP también se llama Fill-In Json. Es un nuevo método para aplicar JSON, pero es solo un JSON incluido en las llamadas de funciones, por ejemplo:
La copia del código es la siguiente:
Callback ({"nombre", "trigkit4"});
JSONP consta de dos partes: función de devolución de llamada y datos. Una función de devolución de llamada es una función que debe llamarse en la página cuando llega la respuesta, y los datos son los datos JSON que se transmiten en la función de devolución de llamada.
En JS, no es posible solicitar datos directamente en diferentes dominios utilizando XMLHTTPREQUEST. Sin embargo, está bien introducir archivos de script JS en diferentes dominios en la página, y JSONP usa esta función para lograrlo. Por ejemplo:
La copia del código es la siguiente:
<script type = "text/javaScript">
function dosomething (jsondata) {
// procesa los datos JSON obtenidos
}
</script>
<script src = "http://example.com/data.php?callback=Dosomething"> </script>
Una vez que el archivo JS se cargue correctamente, se ejecutará la función que especificamos en el parámetro URL, y los datos JSON que necesitamos se pasarán como parámetros. Por lo tanto, JSONP requiere que la página del lado del servidor coopere en consecuencia.
La copia del código es la siguiente:
<? Php
$ Callback = $ _get ['Callback']; // Obtenga el nombre de la función de devolución de llamada
$ data = array ('a', 'b', 'c'); // Los datos se devolverán
echo $ llamado. '('. json_encode ($ data). ')'; // salida
?>
Finalmente, la salida es: dosomething (['a', 'b', 'c']);
Si su página usa jQuery, entonces el método de encapsulación se puede usar para realizar operaciones JSONP muy convenientemente.
La copia del código es la siguiente:
<script type = "text/javaScript">
$ .getjson ('http://example.com/data.php?callback=?,function (jsondata)') {
// procesa los datos JSON obtenidos
});
</script>
JQuery generará automáticamente una función global para reemplazar el signo de interrogación en Callback =?, y luego destruirá automáticamente los datos después de obtenerlo. De hecho, juega el papel de una función de agente temporal. El método $ .getJson determinará automáticamente si es un dominio cruzado. Si no es un dominio cruzado, llamará al método AJAX ordinario; Si es un dominio cruzado, llamará a la función de devolución de llamada JSONP en forma de carga asíncrona de archivos JS.
Pros y contras de JSONP
Las ventajas de JSONP son: no está restringida por políticas homólogas como la solicitud AJAX implementada por el objeto XMLHTTPRequest; Tiene una mejor compatibilidad y puede ejecutarse en navegadores más antiguos, sin el soporte de XMLHTTPREQUEST o ActiveX; Y después de completar la solicitud, el resultado se puede devolver llamando a la devolución de llamada.
La desventaja de JSONP es que solo admite solicitudes GET y no otros tipos de solicitudes HTTP como POST; Solo admite solicitudes HTTP de dominio cruzado, y no puede resolver el problema de cómo hacer llamadas de JavaScript entre dos páginas en diferentes dominios.
Comparación entre CRO y JSONP
En comparación con JSONP, Cors es indudablemente más avanzado, conveniente y confiable.
1. JSONP solo puede implementar solicitudes GET, mientras que CORS admite todo tipo de solicitudes HTTP.
2. Usando CORS, los desarrolladores pueden usar XMLHTTPRequest ordinario para iniciar solicitudes y obtener datos, que tiene un mejor manejo de errores que JSONP.
3. JSONP es compatible principalmente por viejos navegadores. A menudo no admiten CORS, y la mayoría de los navegadores modernos ya admiten CORS).
Subdominio cruzado modificando documento.domain
Los navegadores tienen una política homóloga, y una de sus limitaciones es que en el primer método dijimos que los documentos de diferentes fuentes no se pueden solicitar a través del método AJAX. Su segunda limitación es que la interacción JS no se puede realizar entre marcos de diferentes dominios en el navegador.
Los diferentes marcos pueden obtener objetos de ventana, pero no pueden obtener las propiedades y métodos correspondientes. Por ejemplo, hay una página con la dirección de http://www.example.com/a.html. Hay un iframe en esta página, y su SRC es http://example.com/b.html. Obviamente, esta página tiene un dominio diferente del marco de iframe dentro de él, por lo que no podemos obtener cosas en el iframe escribiendo el código JS en la página:
La copia del código es la siguiente:
<script type = "text/javaScript">
función test () {
var iframe = document.getElementById ('ifame');
var win = document.contentwindow; // Puede obtener el objeto de la ventana en el nombre de iframe, pero las propiedades y métodos del objeto de la ventana no están disponibles
var doc = win.document; // El objeto de documento en el iframe no se puede obtener aquí
var name = win.name; // El atributo de nombre del objeto de la ventana no se puede obtener aquí
}
</script>
<iframe id = "iframe" src = "http://example.com/b.html" onload = "test ()"> </iframe>
En este momento, Document.domain puede ser útil. Solo necesitamos establecer documentos. Domain de ambas páginas: http://www.example.com/a.html y http://example.com/b.html al mismo nombre de dominio. Pero debe tenerse en cuenta que la configuración del documento. Domain es limitado. Solo podemos establecer documentos. Dominio a su propio dominio principal o superior, y el dominio principal debe ser el mismo.
1. Establezca document.domain en la página http://www.example.com/a.html:
La copia del código es la siguiente:
<iframe id = "iframe" src = "http://example.com/b.html" onload = "test ()"> </iframe>
<script type = "text/javaScript">
document.domain = 'ejemplo.com'; // establecer como dominio principal
función test () {
alert (document.getElementById ('iframe'). contentwindow); // contentwindow puede obtener el objeto de la ventana de la ventana infantil
}
</script>
2. También establezca document.domain en la página http://example.com/b.html:
La copia del código es la siguiente:
<script type = "text/javaScript">
document.domain = 'ejemplo.com'; // Cargue esta página en iframe y establezca document.domain para que sea lo mismo que document.domain en la página principal
</script>
El método para modificar el documento. Domain solo es adecuado para las interacciones entre marcos con diferentes subdominios.