Resumen de varias soluciones front-end entre dominios (recomendado)
Aquellos que trabajan en interfaces grandes definitivamente encontrarán problemas entre dominios. Aunque hay mucha información sobre este aspecto en Internet, todavía me gusta escribirla yo mismo. entendido y resumido será el más recordado.
Política del mismo origen
La política del mismo origen de JavaScript es una política de seguridad bien conocida propuesta por Netscape para evitar que el JS del sitio A opere los datos de otros sitios web. Piénselo, ahora abrió su navegador, abrió el sitio web de un banco en una ventana de pestaña y abrió un sitio web malicioso en otra ventana de pestaña, y el sitio web malicioso tiene un JavaScript diseñado específicamente para modificar la información bancaria cuando visita esto. sitio web malicioso y ejecuta su JavaScript, su página bancaria será modificada por este JavaScript (como obtener su número de tarjeta y contraseña, o transferir dinero a la cuenta del hacker, etc.), ¡y las consecuencias serán muy graves! La política del mismo origen es para evitar que suceda este tipo de cosas. Estipula que los archivos JS en el sitio web A solo pueden operar los datos del sitio web A y no pueden operar los datos del sitio web B.
Para facilitar la comprensión, dividamos esta palabra en dos palabras: homología y estrategia (perdóname, me temo que no lo entiendes).
La llamada homología significa que los recursos provienen de la misma fuente. Si dos páginas tienen el mismo protocolo, número de puerto y host (incluidos los nombres de subdominio y dominio principal), entonces las dos páginas pertenecen a la misma fuente.
La llamada estrategia se refiere a lo que se puede hacer. JS bajo la misma fuente puede operar datos bajo la misma fuente.
Para dar un ejemplo y ver si lo comprende, consulte el enlace a continuación. El protocolo es pany.com y el número de puerto generalmente es 80 de forma predeterminada. Luego compárelo con cada URL en la siguiente tabla para determinar cuáles son del mismo origen y cuáles no.
URL
Resultado
Motivo
pany.com/dir2/other.html
Mismo origen
pany.com/dir/inner/another.html
Mismo origen
pany.com/secure.html
No original origen
Diferentes protocolos
pany.com:81/dir/etc.html
Origen no original
Diferentes puertos
pany.com/dir/other.html
Origen no original
Diferentes hosts
Qué es dominio cruzado
Dominio de origen cruzado
Solución de dominio cruzado
Opción 1-JSONP
JSONP es la abreviatura de JSON con relleno. JSONP consta de dos partes: función de devolución de llamada y datos.
La función de devolución de llamada es un nombre de función acordado entre el cliente y el servidor, que generalmente se especifica en la solicitud.
Los datos son los datos JSON pasados a la función de devolución de llamada.
JSONP es dinámico
callback({"name": "michael"});
Pregunta 1: JSONP requiere la creación dinámica de etiquetas de secuencia de comandos, ¿verdad? ¿Necesitas lidiar con estos elementos del guión? ¿Como lidiar con?
Pregunta 2: ¿Qué debo hacer si se produce un error del servidor durante una solicitud JSONP? Por ejemplo, el servidor falla o se devuelve una página 404. ¿Cómo debe manejar este error el front-end? ¿directamente?
Respuesta
JSONP solo puede implementar solicitudes GET, mientras que CORS admite todo tipo de solicitudes HTTP
JSONP tiene buena compatibilidad y no requiere el soporte de XMLHttpRequest
p>Opción 2: CORS para compartir recursos entre dominios
El uso compartido de recursos entre dominios define cómo el navegador y el servidor deben comunicarse cuando se debe acceder a recursos entre dominios. Su principio es utilizar encabezados HTTP personalizados para permitir que el servidor se comunique con el navegador, principalmente configurando Access-Control-Allow-Origin del encabezado de respuesta.
Opción 3-document.domain
La política del mismo origen del navegador hace imposible que los marcos de diferentes dominios interactúen con JS. Por ejemplo: hay una página llamada /a.htmls, y también hay un /b.htmls en esta página. Obviamente, a.html y b.html están en dominios diferentes, por lo que no podemos obtenerlo escribiendo código js. la página. cosas en el iframe, pero si configuramos el documento.dominio de estas dos páginas con el mismo nombre de dominio, debe tenerse en cuenta que solo podemos configurar el documento.dominio en sí mismo o en un dominio principal de nivel superior. y el nombre de dominio principal debe ser el mismo.
Condiciones de uso
document.domain se aplica a las interacciones entre marcos en diferentes subdominios.
Opción 4-window.name
El objeto de ventana tiene un atributo de nombre, que tiene una característica: dentro del ciclo de vida de una ventana, todas las páginas cargadas por la ventana son ** * Al compartir un nombre de ventana, cada página tiene permisos de lectura y escritura para nombre de ventana, nombre de ventana es persistente en todas las páginas cargadas en una ventana.
Opción 5-window.postMessage
El método window.postMessage(message,targetOrigin) se puede utilizar para enviar mensajes a otros objetos de ventana, independientemente de si el objeto de ventana pertenece al Misma fuente o diferentes fuentes