Estude notas de problemas de domínio cruzado em javascript

---

Em js, como resolver problemas de domínio cruzado é um conteúdo muito importante. Cors de problemas entre domínios: compartilhamento de recursos entre origens.

Política de mesma origem: somente quando páginas com o mesmo protocolo, porta e nome de domínio, as duas páginas têm a mesma origem. Contanto que o protocolo, o host e o número da porta do site sejam diferentes, a solicitação de dados e a transmissão entre os sites constitui uma chamada de domínio cruzado e será restrita pela política de mesma origem.

 

Nota: Não importa o tipo de domínio cruzado, a cooperação do lado do servidor é necessária, e o lado do servidor é o domínio cruzado dominante.

 

1. Rótulo de domínio cruzado naturalmente:

Em js, existem algumas tags que podem ser naturalmente entre domínios, como imagem img ou script de script.

Ter tags em src é inerentemente entre domínios.

Desvantagens: Apenas solicitações Get podem ser enviadas e o texto de resposta do servidor não pode ser acessado (apenas uma solicitação unilateral).

2. Use postMessage para vários domínios (mensagens entre páginas):

// 父  目标.contentWindow.postMessage()
window.addEventListener('message', function(e) { alert(e.data); });
document.querySelector('iframe').contentWindow.postMessage('myMessage', '/'); // '/'表示同域 '*'所有
// 子  找父窗口：window.top || window.parentWindow
window.addEventListener('message', function(e) { alert(e.data);  }); // 在监听事件内找父窗口 e.source
window.parentWindow.postMessage();

3. Domínio cruzado JSONP:

A primeira etapa: pense sobre o que fazer depois de obter os dados entre os domínios e escreva uma função de retorno de chamada.

Etapa 2: use a natureza de domínio cruzado da tag de script para solicitar o servidor, obtenha um trecho de código javascript, volte e execute-o! Este código é o código que chama a função de retorno de chamada.

Etapa 3: O servidor coopera e retorna uma parte do código js.

<script>
    function callback(data) {
        console.log('拿到的数据：' + data);
        }
</script>
<script src="http://localhost:8888?key=callback"></script>
// 服务器
res.end(`${ funcName }(${ JSON.stringify(data) })`);

4.CORS entre domínios:

$.ajax({
    	url: 'http://localhost:8888',
    	success: function(data) {
    		console.log(data);
    	}
});
// 服务器
res.setHeader('Access-Control-Allow-Origin', '*');  // 允许所有请求跨域
res.setHeader('Access-Control-Allow-Methods', 'GET,POST,DELETE')  // 允许请求的类型
res.setHeader('Access-Control-Allow-Headers', 'X-PINGOTHER, Content-Type') // 预检请求
res.setHeader('Access-Control-Max-Age', '1000') // 请求最大响应时间
res.setHeader("Access-Control-Allow-Credentials", 'true') // 是否携带cookie
// ajax设置
"withCredentials": true

5.window.name + iframe ：

Recursos utilizados: a capacidade de domínio cruzado da tag iframe; a capacidade do valor do atributo window.name de ainda existir após a atualização do documento (e o máximo permitido é cerca de 2M).

document.querySelector('iframe').contentWindow.name = '张三'; 

6. Modifique document.domain nos subdomínios:

 Pré-requisito: Esses dois nomes de domínio devem pertencer ao mesmo nome de domínio básico! Além disso, os protocolos e portas usados ​​devem ser consistentes, caso contrário, document.domain não pode ser usado para domínio cruzado, portanto, pode apenas cruzar subdomínios.

Existem agora dois nomes de domínio aaa.xxx.com e bbb.xxx.com. As páginas incorporadas com bbb sob aaa, porque seu document.name é inconsistente, não podem operar bbb js sob aaa. Você pode definir document.name = 'xxx.com'; consistente em aaa e bbb até js para obter acesso mútuo.

7.WebSocket:

Ele implementa a comunicação full-duplex entre o navegador e o servidor, permitindo a comunicação entre domínios.É uma ótima implementação da tecnologia push de servidor.

Desvantagens: os objetos WebSocket não oferecem suporte a ouvintes de eventos DOM nível 2 e cada evento deve ser definido separadamente usando a sintaxe DOM nível 0.

8. Agência:

A política de mesma origem é uma restrição do lado do navegador. O problema pode ser resolvido do lado do servidor. Cliente DomínioA (navegador) => servidor DomínioA => servidor DomínioB => Cliente DomínioA (navegador).

Por exemplo, se o projeto react usa um proxy, você pode configurar a propriedade "proxy" no nó package.json.

---

Acima estão os métodos que algumas vacas grandes na Internet costumam usar, mas agora a maioria deles usa três métodos: tags naturais de domínio cruzado, domínio cruzado CORS e proxy de configuração.