introducción
En el desarrollo front-end, los problemas entre dominios son un problema muy común. Este artículo presentará en detalle qué es el dominio cruzado, escenarios comunes de dominio cruzado y varias soluciones de dominio cruzado de uso común.
¿Qué es el dominio cruzado?
Dominio cruzado se refiere a una página web o aplicación web que inicia una solicitud de recursos bajo otro nombre de dominio en el navegador. Debido a las restricciones de la política del mismo origen del navegador, el navegador interceptará dichas solicitudes entre dominios.
La misma política de origen se refiere a:
- Homología significa que sólo cuando el protocolo, el nombre de dominio y el puerto son exactamente iguales, se considera que tienen el mismo origen.
- Las páginas web de diferentes fuentes no pueden leer el contenido de la otra página web ni utilizar la interfaz JS de la otra página web debido a consideraciones de seguridad.
Escenarios comunes entre dominios
- En el desarrollo separado de front-end y back-end, el front-end solicita la API de back-end
- Utilice CDN para cargar bibliotecas JS de terceros
- La página de inicio incorpora comentarios/compartir y otros componentes de otros sitios web.
- La página H5 se comunica con el mini programa/aplicación
Soluciones entre dominios comúnmente utilizadas
1. Las etiquetas JSONscript no están restringidas por la misma política de origen y pueden implementar JSON
<script>
function callback(data) {
console.log(data);
}
</script>
<script src="http://other.com/api?callback=callback"></script>
2. CORS
CORS también es compatible con W3.
let xhr = new XMLHttpRequest();
xhr.('GET', 'http://other.com/api');
xhr.send();
3. Proxy Nginx
Utilice el proxy inverso de Nginx para implementar solicitudes entre dominios.
4. publicar mensaje
Utilice iframe + postMessage para lograr la comunicación entre ventanas.
5. nombre.ventana
Utilice el atributo de nombre para transmitir datos pequeños para lograr la comunicación entre fuentes.
6. WebSocket
Un protocolo que admite la comunicación entre dominios.
Cada uno de los métodos anteriores tiene sus propias ventajas: en el desarrollo real, es necesario seleccionar la mejor solución en función del escenario. ¡Espero que este artículo pueda proporcionar una referencia para resolver problemas entre dominios!