domínio cruzado AJAX do jQuery

Aqui estão duas páginas, test.php e testserver.php.

test.php

<script src="scripts/jq.js" type="text/javascript"></script>
<script>
    $(function() {
        $.ajax({url:"testserver.php",
            success:function() {
                alert("Success");
            },
            error:function() {
                alert("Error");
            },
            dataType:"json",
            type:"get"
        }
    )})
</script>

testserver.php

<?php
$arr = array("element1",
             "element2",
             array("element31","element32"));
$arr['name'] = "response";
echo json_encode($arr);
?>

Agora, meu problema: quando esses dois arquivos estão no mesmo servidor (localhost ou servidor web), ele funciona e alert("Success")é chamado; Se estiver em servidores diferentes, o que significa testingerver.php no servidor web e test.php no host local, não está funcionando e alert("Error")está em execução. Mesmo que o URL dentro do ajax seja alterado para http://domain.com/path/to/file/testserver.php

Use JSONP .

jQuery:

$.ajax({
     url:"testserver.php",
     dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
     success:function(json){
         // do stuff with json (in this case an array)
         alert("Success");
     },
     error:function(){
         alert("Error");
     }      
});

PHP:

<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
echo $_GET['callback']."(".json_encode($arr).");";
?>

O eco pode estar errado, já faz um tempo desde que eu usei o php. Em qualquer caso, você precisa emitir callbackName('jsonString')as cotações. O jQuery passará seu próprio nome de retorno de chamada, portanto você precisa obtê-lo dos parâmetros GET.

E como Stefan Kendall postou, $ .getJSON () é um método abreviado, mas você precisa anexar 'callback=?'ao URL como parâmetro GET (sim, o valor é?, O jQuery substitui isso por seu próprio método de retorno de chamada gerado).

JSONP é uma boa opção, mas existe uma maneira mais fácil. Você pode simplesmente definir o Access-Control-Allow-Origincabeçalho no seu servidor. A configuração para *aceitar solicitações AJAX entre domínios de qualquer domínio. ( https://developer.mozilla.org/en/http_access_control )

O método para fazer isso varia de idioma para idioma, é claro. Aqui está no Rails:

class HelloController < ApplicationController
  def say_hello
    headers['Access-Control-Allow-Origin'] = "*"
    render text: "hello!"
  end
end

Neste exemplo, a say_helloação aceitará solicitações AJAX de qualquer domínio e retornará uma resposta "Olá!".

Aqui está um exemplo dos cabeçalhos que podem retornar:

HTTP/1.1 200 OK 
Access-Control-Allow-Origin: *
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Type: text/html; charset=utf-8
X-Ua-Compatible: IE=Edge
Etag: "c4ca4238a0b923820dcc509a6f75849b"
X-Runtime: 0.913606
Content-Length: 6
Server: WEBrick/1.3.1 (Ruby/1.9.2/2011-07-09)
Date: Thu, 01 Mar 2012 20:44:28 GMT
Connection: Keep-Alive

Por mais fácil que seja, ele tem algumas limitações no navegador. Consulte http://caniuse.com/#feat=cors .

Você pode controlar isso via cabeçalho HTTP adicionando Access-Control-Allow-Origin . A configuração como * aceitará solicitações AJAX entre domínios de qualquer domínio.

Usando o PHP é muito simples, basta adicionar a seguinte linha ao script que você deseja acessar fora do seu domínio:

header("Access-Control-Allow-Origin: *");

Não se esqueça de ativar o módulo mod_headers no httpd.conf.

Você precisa dar uma olhada na mesma política de origem :

Na computação, a mesma política de origem é um conceito de segurança importante para várias linguagens de programação do navegador, como JavaScript. A política permite que scripts em execução nas páginas originárias do mesmo site acessem os métodos e propriedades um do outro sem restrições específicas, mas impede o acesso à maioria dos métodos e propriedades nas páginas de sites diferentes.

Para que você possa obter dados, é necessário:

Mesmo protocolo e host

Você precisa implementar o JSONP para contorná -lo.

Eu tive que carregar a página do disco local "file: /// C: /test/htmlpage.html", chamar "URL http: //localhost/getxml.php" e fazer isso nos navegadores IE8 + e Firefox12 +, use o jQuery v1 .7.2 lib para minimizar o código padrão. Depois de ler dezenas de artigos, finalmente entendi. Aqui está o meu resumo.

• O script do servidor (.php, .jsp, ...) deve retornar o cabeçalho de resposta http Access-Control-Allow-Origin: *
• antes de usar o jQuery ajax, defina esse sinalizador em javascript: jQuery.support.cors = true;
• você pode definir o sinalizador uma vez ou todas as vezes antes de usar a função jQuery ajax
• agora eu posso ler o documento .xml no IE e Firefox. Outros navegadores que não testei.
• O documento de resposta pode ser sem formatação / texto, xml, json ou qualquer outra coisa

Aqui está um exemplo de chamada ajax do jQuery com alguns sysouts de depuração.

jQuery.support.cors = true;
$.ajax({
    url: "http://localhost/getxml.php",
    data: { "id":"doc1", "rows":"100" },
    type: "GET",
    timeout: 30000,
    dataType: "text", // "xml", "json"
    success: function(data) {
        // show text reply as-is (debug)
        alert(data);

        // show xml field values (debug)
        //alert( $(data).find("title").text() );

        // loop JSON array (debug)
        //var str="";
        //$.each(data.items, function(i,item) {
        //  str += item.title + "\n";
        //});
        //alert(str);
    },
    error: function(jqXHR, textStatus, ex) {
        alert(textStatus + "," + ex + "," + jqXHR.responseText);
    }
});

É verdade que a política de mesma origem impede que o JavaScript faça solicitações entre domínios, mas a especificação CORS permite exatamente o tipo de acesso à API que você está procurando e é suportada pelo lote atual dos principais navegadores.

Veja como habilitar o compartilhamento de recursos de origem cruzada para cliente e servidor:

http://enable-cors.org/

"O CORS (compartilhamento de recursos de origem cruzada) é uma especificação que permite acesso verdadeiramente aberto através dos limites do domínio. Se você exibir conteúdo público, considere usar o CORS para abri-lo para acesso universal a JavaScript / navegador".

Isso é possível, mas você precisa usar JSONP, não JSON. O link de Stefan apontou você na direção certa. A página jQuery AJAX tem mais informações sobre JSONP.

Remy Sharp tem um exemplo detalhado usando PHP .

Eu uso o servidor Apache, então usei o módulo mod_proxy. Ativar módulos:

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

Adicione então:

ProxyPass /your-proxy-url/ http://service-url:serviceport/

Por fim, passe o proxy-url para o seu script.

A segurança do navegador impede fazer uma chamada ajax de uma página hospedada em um domínio para uma página hospedada em um domínio diferente; isso é chamado de " política de mesma origem ".

Existem alguns exemplos para usar JSONP, que incluem manipulação de erros.

No entanto, observe que o evento de erro não é acionado ao usar JSONP! Consulte: http://api.jquery.com/jQuery.ajax/ ou solicitação do jQuery ajax usando erro jsonp

Nos documentos do Jquery ( link ):

• Devido a restrições de segurança do navegador, a maioria das solicitações "Ajax" está sujeita à mesma política de origem; a solicitação não pode recuperar dados de um domínio, subdomínio ou protocolo diferente.

• As solicitações de script e JSONP não estão sujeitas às mesmas restrições de política de origem.

Então, eu presumo que você precisa usar o jsonp para a solicitação. Mas não tentei isso sozinho.

Conheço três maneiras de resolver seu problema:

1. Primeiro, se você tiver acesso aos dois domínios, poderá permitir o acesso a todos os outros domínios usando:

   header("Access-Control-Allow-Origin: *");

   ou apenas um domínio adicionando o código abaixo ao arquivo .htaccess:

   <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> SetEnvIf Origin "http(s)?://(www\.)?(google.com|staging.google.com|development.google.com|otherdomain.net|dev02.otherdomain.net)$" AccessControlAllowOrigin=$0 Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin </IfModule> </FilesMatch>

2. você pode ter uma solicitação ajax para um arquivo php no seu servidor e manipular a solicitação para outro domínio usando esse arquivo php.

3. você pode usar o jsonp, porque ele não precisa de permissão. para isso, você pode ler a resposta do nosso amigo @BGerrissen.

Para o Microsoft Azure, é um pouco diferente.

O Azure tem uma configuração especial do CORS que precisa ser definida. É essencialmente a mesma coisa nos bastidores, mas simplesmente definir o cabeçalho que joshuarh menciona não funcionará. A documentação do Azure para habilitar vários domínios pode ser encontrada aqui:

https://docs.microsoft.com/en-us/azure/app-service-api/app-service-api-cors-consume-javascript

Eu brinquei com isso por algumas horas antes de perceber que minha plataforma de hospedagem tinha essa configuração especial.

funciona, tudo que você precisa:

PHP:

header('Access-Control-Allow-Origin: http://www.example.com');
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');

JS (jQuery ajax):

var getWBody = $.ajax({ cache: false,
        url: URL,
        dataType : 'json',
        type: 'GET',
        xhrFields: { withCredentials: true }
});