jQuery AJAX interdominio

Ecco due pagine, 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);
?>

Ora il mio problema: quando entrambi questi file si trovano sullo stesso server (localhost o web server), funziona e alert("Success")viene chiamato; Se si trova su server diversi, significa testerver.php sul server web e test.php su localhost, non funziona e si alert("Error")sta eseguendo. Anche se l'URL all'interno di Ajax viene modificato in http://domain.com/path/to/file/testserver.php

Usa 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).");";
?>

L'eco potrebbe essere sbagliata, è da un po 'che non uso php. In ogni caso è necessario emettere callbackName('jsonString')notare i preventivi. jQuery passerà il proprio nome di callback, quindi è necessario ottenerlo dai parametri GET.

E come ha pubblicato Stefan Kendall, $ .getJSON () è un metodo abbreviato, ma quindi è necessario aggiungere 'callback=?'all'URL come parametro GET (sì, valore è?, JQuery lo sostituisce con il proprio metodo di callback generato).

JSONP è una buona opzione, ma esiste un modo più semplice. Puoi semplicemente impostare l' Access-Control-Allow-Originintestazione sul tuo server. L'impostazione su *accetterà le richieste AJAX tra domini da qualsiasi dominio. ( https://developer.mozilla.org/en/http_access_control )

Il metodo per farlo varierà da una lingua all'altra, ovviamente. Eccolo in Rails:

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

In questo esempio, l' say_helloazione accetterà le richieste AJAX da qualsiasi dominio e restituirà una risposta di "ciao!".

Ecco un esempio delle intestazioni che potrebbe restituire:

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

Facile com'è, ha alcune limitazioni del browser. Vedi http://caniuse.com/#feat=cors .

Puoi controllarlo tramite intestazione HTTP aggiungendo Access-Control-Allow-Origin . Impostandolo su * si accettano richieste AJAX tra domini da qualsiasi dominio.

Usare PHP è davvero semplice, basta aggiungere la seguente riga nello script a cui si desidera avere accesso al di fuori del proprio dominio:

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

Non dimenticare di abilitare il modulo mod_headers in httpd.conf.

Devi dare un'occhiata alla stessa politica di origine :

Nell'informatica, la stessa politica di origine è un importante concetto di sicurezza per numerosi linguaggi di programmazione lato browser, come JavaScript. La politica consente agli script in esecuzione su pagine provenienti dallo stesso sito di accedere a metodi e proprietà reciproci senza restrizioni specifiche, ma impedisce l'accesso alla maggior parte dei metodi e delle proprietà su più pagine di siti diversi.

Per poter ottenere i dati, devono essere:

Stesso protocollo e host

È necessario implementare JSONP per aggirare il problema.

Ho dovuto caricare la pagina Web dal disco locale "file: /// C: /test/htmlpage.html", chiamare l'URL "http: //localhost/getxml.php" e farlo in browser IE8 + e Firefox12 +, usare jQuery v1 .7.2 lib per minimizzare il codice del boilerplate. Dopo aver letto dozzine di articoli, finalmente ho capito. Ecco il mio riassunto.

• lo script del server (.php, .jsp, ...) deve restituire l'intestazione della risposta http Access-Control-Allow-Origin: *
• prima di usare jQuery ajax imposta questo flag in javascript: jQuery.support.cors = true;
• è possibile impostare flag una o ogni volta prima di utilizzare la funzione jQuery ajax
• ora posso leggere il documento .xml in IE e Firefox. Altri browser che non ho testato.
• il documento di risposta può essere semplice / testo, xml, json o qualsiasi altra cosa

Ecco un esempio di chiamata jQuery ajax con alcuni sysout di debug.

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);
    }
});

È vero che la politica della stessa origine impedisce a JavaScript di effettuare richieste tra domini, ma la specifica CORS consente proprio il tipo di accesso API che stai cercando ed è supportata dal batch corrente dei principali browser.

Scopri come abilitare la condivisione delle risorse tra le origini per client e server:

http://enable-cors.org/

"La condivisione di risorse tra origini (CORS) è una specifica che consente un accesso veramente aperto oltre i confini del dominio. Se servi contenuti pubblici, considera l'utilizzo di CORS per aprirlo per l'accesso universale a JavaScript / browser."

Questo è possibile, ma è necessario utilizzare JSONP, non JSON. Il collegamento di Stefan ti ha indicato la giusta direzione. La pagina jQuery AJAX contiene ulteriori informazioni su JSONP.

Remy Sharp ha un esempio dettagliato usando PHP .

Uso il server Apache, quindi ho usato il modulo mod_proxy. Abilita moduli:

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

Quindi aggiungere:

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

Infine, passa proxy-url al tuo script.

La sicurezza del browser impedisce di effettuare una chiamata Ajax da una pagina ospitata su un dominio a una pagina ospitata su un dominio diverso; questa si chiama " politica della stessa origine ".

Esistono alcuni esempi per l'utilizzo di JSONP che includono la gestione degli errori.

Tuttavia, si noti che l'evento di errore non viene attivato quando si utilizza JSONP! Vedi: http://api.jquery.com/jQuery.ajax/ o jQuery ajax request using jsonp error

Dai documenti di Jquery ( link ):

• A causa delle restrizioni di sicurezza del browser, la maggior parte delle richieste "Ajax" sono soggette alla stessa politica di origine; la richiesta non può recuperare correttamente i dati da un dominio, sottodominio o protocollo diverso.

• Le richieste di script e JSONP non sono soggette alle stesse restrizioni della politica di origine.

Quindi riterrei necessario utilizzare jsonp per la richiesta. Ma non ho provato questo da solo.

Conosco 3 modi per risolvere il tuo problema:

1. Innanzitutto se hai accesso a entrambi i domini puoi consentire l'accesso a tutti gli altri domini usando:

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

   o solo un dominio aggiungendo il codice seguente al file .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. puoi avere una richiesta Ajax a un file PHP nel tuo server e gestire la richiesta a un altro dominio usando questo file PHP.

3. puoi usare jsonp, perché non necessita di autorizzazione. per questo puoi leggere la risposta del nostro amico @BGerrissen.

Per Microsoft Azure, è leggermente diverso.

Azure ha un'impostazione CORS speciale che deve essere configurata. È essenzialmente la stessa cosa dietro le quinte, ma semplicemente l'impostazione dell'intestazione menzionata da joshuarh non funzionerà. La documentazione di Azure per l'abilitazione del dominio incrociato è disponibile qui:

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

Mi sono occupato di questo per alcune ore prima di rendermi conto che la mia piattaforma di hosting aveva questa impostazione speciale.

funziona, tutto ciò che serve:

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 }
});