O que é domínio cruzado?
Conceito: Desde que haja alguma diferença no protocolo, nome de domínio ou porta, ele é considerado um domínio diferente.
A cópia do código é a seguinte:
URL indica se a comunicação é permitida
http://www.a.com/a.js
http://www.a.com/b.js permitido sob o mesmo nome de domínio
http://www.a.com/lab/a.js
http://www.a.com/script/b.js diferentes pastas sob o mesmo nome de domínio são permitidas
http://www.a.com:8000/a.js
http://www.a.com/b.js o mesmo nome de domínio, portas diferentes não são permitidas
http://www.a.com/a.js
https://www.a.com/b.js o mesmo nome de domínio, diferentes protocolos não permitem
http://www.a.com/a.js
http://70.32.92.74/b.js O nome do domínio e o nome do domínio correspondem ao IP não são permitidos
http://www.a.com/a.js
http://script.a.com/b.js O domínio principal é o mesmo, mas o subdomínio não é permitido
http://www.a.com/a.js
http://a.com/b.js o mesmo nome de domínio, nomes de domínio secundários diferentes (o mesmo que acima) não são permitidos (não há acesso a cookies neste caso)
http://www.cnblogs.com/a.js
http://www.a.com/b.js diferentes nomes de domínio não são permitidos
A diferença entre portas e protocolos só pode ser resolvida através do plano de fundo.
Compartilhamento de Recursos de Domínios Cross
O compartilhamento de recursos entre domínios CROs (Cross-Origin Compartilhamento de Recursos) define como o navegador e o servidor devem se comunicar ao acessar recursos de domínio cruzado. A idéia básica por trás do CROS é usar um cabeçalho HTTP personalizado para permitir que o navegador se comunique com o servidor, decidindo assim se a solicitação ou resposta deve ser bem -sucedida ou falhar.
A cópia do código é a seguinte:
<script type = "text/javascript">
var xhr = novo xmlHttPrequest ();
xhr.open ("get", "/trigkit4", true);
xhr.send ();
</script>
O trigkit4 acima é um caminho relativo. Se quisermos usar CORS, o código Ajax relevante pode ser assim:
A cópia do código é a seguinte:
<script type = "text/javascript">
var xhr = novo xmlHttPrequest ();
xhr.open ("get", "http://segmentfault.com/u/trigkit4/",True);
xhr.send ();
</script>
A diferença entre o código e a anterior é que o caminho relativo é substituído pelo caminho absoluto de outros domínios, ou seja, o endereço da interface que você deseja acessar nos domínios.
O suporte ao lado do servidor para CORS é alcançado principalmente definindo o acesso ao controle de acesso-arel-origin. Se o navegador detectar as configurações correspondentes, o AJAX poderá acessar os domínios.
Para resolver problemas de domínio cruzado, podemos usar os seguintes métodos:
Domínio cruzado via jsonp
Agora a pergunta é? O que é JSONP? A definição da Wikipedia é: JSONP (JSON com preenchimento) é um "modo de uso" do formato de dados JSON, que permite que as páginas da web solicitem informações de outros domínios.
O JSONP também é chamado de Fill-In Json. É um novo método para aplicar o JSON, mas é apenas um JSON incluído nas chamadas de função, por exemplo:
A cópia do código é a seguinte:
retorno de chamada ({"name", "trigkit4"});
O JSONP consiste em duas partes: função de retorno de chamada e dados. Uma função de retorno de chamada é uma função que deve ser chamada na página quando a resposta chegar, e os dados são os dados JSON passados para a função de retorno de chamada.
No JS, não é possível solicitar diretamente dados em diferentes domínios usando o XMLHTTPREQUEST. No entanto, não há problema em introduzir arquivos de script JS em diferentes domínios na página, e o JSONP usa esse recurso para alcançá -lo. Por exemplo:
A cópia do código é a seguinte:
<script type = "text/javascript">
função doSomething (jsondata) {
// Processar os dados JSON obtidos
}
</script>
<script src = "http://example.com/data.php?callback=dosomething"> </script>
Depois que o arquivo JS for carregado com sucesso, a função que especificou no parâmetro URL será executada e os dados JSON necessários serão aprovados como parâmetros. Portanto, o JSONP exige que a página do lado do servidor coopere de acordo.
A cópia do código é a seguinte:
<? php
$ callback = $ _get ['retorno de chamada']; // Obtenha o nome da função de retorno de chamada
$ data = array ('a', 'b', 'c'); // os dados a serem retornados
eco $ callback. '('. json_encode ($ dados). ')'; // saída
?>
Finalmente, a saída é: DoSomething (['A', 'B', 'C']);
Se sua página usar o jQuery, o método de encapsulamento pode ser usado para executar operações JSONP com muita conveniência.
A cópia do código é a seguinte:
<script type = "text/javascript">
$ .getjson ('http://example.com/data.php?callback=?,function (jsondata)') {
// Processar os dados JSON obtidos
});
</script>
O jQuery gerará automaticamente uma função global para substituir o ponto de interrogação no retorno de chamada =?, e depois destruirá automaticamente os dados após obtê -los. De fato, ele desempenha o papel de uma função temporária do agente. O método $ .getjson determinará automaticamente se é domínio cruzado. Se não for o domínio cruzado, ele chamará o método comum de Ajax; Se for um domínio cruzado, ele chamará a função de retorno de chamada JSONP na forma de carregamento assíncrono de arquivos JS.
Prós e contras do JSONP
As vantagens do JSONP são: não é restrito por políticas homólogas, como a solicitação AJAX implementada pelo objeto xmlHttPrequest; Tem melhor compatibilidade e pode ser executado em navegadores mais antigos, sem o apoio do XMLHTTPREQUEST ou ActiveX; E após a conclusão da solicitação, o resultado pode ser retornado ligando para o retorno de chamada.
A desvantagem do JSONP é que ele suporta apenas solicitações de obtenção e não outros tipos de solicitações HTTP, como Post; Ele suporta apenas solicitações HTTP de domínio cruzado e não pode resolver o problema de como fazer chamadas de JavaScript entre duas páginas em diferentes domínios.
Comparação entre CROs e JSONP
Comparado com o JSONP, o CORS é sem dúvida mais avançado, conveniente e confiável.
1. O JSONP só pode implementar solicitações GET, enquanto o CORS suporta todos os tipos de solicitações HTTP.
2. Usando CORS, os desenvolvedores podem usar o xmlHttPrequest comum para iniciar solicitações e obter dados, que têm melhor manuseio de erros que o JSONP.
3. O JSONP é apoiado principalmente por navegadores antigos. Eles geralmente não suportam CORS, e a maioria dos navegadores modernos já suporta CORS).
Subdomínio cruzado modificando o documento.Domain
Os navegadores têm uma política homóloga e uma de suas limitações é que, no primeiro método, dissemos que documentos de diferentes fontes não podem ser solicitados pelo método Ajax. Sua segunda limitação é que a interação JS não pode ser realizada entre estruturas de diferentes domínios no navegador.
Diferentes estruturas podem obter objetos de janela, mas não podem obter propriedades e métodos correspondentes. Por exemplo, há uma página com o endereço de http://www.example.com/a.html. Há um iframe nesta página e seu SRC é http://example.com/b.html. Obviamente, esta página tem um domínio diferente da estrutura do iframe dentro dela, por isso não podemos colocar as coisas no iframe escrevendo o código JS na página:
A cópia do código é a seguinte:
<script type = "text/javascript">
function test () {
var iframe = document.getElementById ('ifame');
var win = document.contentWindow; // você pode obter o objeto da janela no iframe, mas as propriedades e métodos do objeto da janela estão quase indisponíveis
var doc = win.document; // O objeto de documento no iframe não pode ser obtido aqui
var name = win.name; // O atributo de nome do objeto da janela não pode ser obtido aqui
}
</script>
<iframe id = "iframe" src = "http://example.com/b.html" onload = "test ()"> </frame>
No momento, o documento.Domain pode ser útil. Só precisamos definir document.Domain de ambas as páginas: http://www.example.com/a.html e http://example.com/b.html com o mesmo nome de domínio. Mas deve -se notar que a configuração do documento.Domain é limitada. Só podemos definir o documento.Domain para o seu próprio domínio pai ou superior, e o domínio principal deve ser o mesmo.
1. Defina document.Domain na página http://www.example.com/a.html:
A cópia do código é a seguinte:
<iframe id = "iframe" src = "http://example.com/b.html" onload = "test ()"> </frame>
<script type = "text/javascript">
document.domain = 'exemplo.com'; // definido como domínio principal
function test () {
alert (document.getElementById ('iframe'). ContentWindow); // ContentWindow pode obter o objeto da janela da janela infantil
}
</script>
2. Defina também Document.Domain na página http://example.com/b.html:
A cópia do código é a seguinte:
<script type = "text/javascript">
document.domain = 'exemplo.com'; // Carregar esta página no iframe e defina document.domain para torná -lo o mesmo que document.domain na página principal
</script>
O método de modificar o documento.Domain é adequado apenas para interações entre estruturas com diferentes subdomínios.