JQuery AJAX Kreuzdomain

Question

Hier sind zwei Seiten, test.php und testserver.php.

test.php

    $(function() {
        $.ajax({url:"testserver.php",
            success:function() {
                alert("Erfolg");
            },
            error:function() {
                alert("Fehler");
            },
            dataType:"json",
            type:"get"
        }
    )})

testserver.php

Jetzt mein Problem: Wenn sich beide Dateien auf demselben Server befinden (entweder localhost oder Webserver), funktioniert es und alert("Erfolg") wird aufgerufen. Wenn sie auf verschiedenen Servern sind, also testserver.php auf dem Webserver und test.php auf localhost, funktioniert es nicht und alert("Fehler") wird ausgeführt. Selbst wenn die URL innerhalb des AJAX auf http://domain.example/path/to/file/testserver.php geändert wird.

Answer 1

Verwenden Sie JSONP.

jQuery:

$.ajax({
     url:"testserver.php",
     dataType: 'jsonp', // Achtung! JSONP <-- P (kleingeschrieben)
     success:function(json){
         // Mach was mit dem JSON (in diesem Fall ein Array)
         alert("Erfolg");
     },
     error:function(){
         alert("Fehler");
     }      
});

PHP:

Das echo könnte falsch sein, es ist schon eine Weile her, seit ich PHP benutzt habe. Auf jeden Fall müssen Sie callbackName('jsonString') ausgeben, beachten Sie die Anführungszeichen. jQuery gibt seinen eigenen Callback-Namen weiter, daher müssen Sie diesen aus den GET-Parametern erhalten.

Und wie Stefan Kendall gepostet hat, ist $.getJSON() eine Abkürzungsmethode, aber dann müssen Sie 'callback=?' als GET-Parameter an die URL anhängen (ja, der Wert ist ?, jQuery ersetzt dies durch seine eigene generierte Callback-Methode).

Answer 2

JSONP ist eine gute Option, aber es gibt einen einfacheren Weg. Sie können einfach den Access-Control-Allow-Origin-Header auf Ihrem Server setzen. Wenn Sie ihn auf * setzen, werden Cross-Domain-AJAX-Anfragen von jeder Domain akzeptiert. (https://developer.mozilla.org/en/http_access_control)

Die Methode dazu variiert natürlich von Sprache zu Sprache. Hier ist es in Rails:

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

In diesem Beispiel wird die say_hello-Aktion AJAX-Anfragen von jeder Domain akzeptieren und eine Antwort von "Hallo!" zurückgeben.

Hier ist ein Beispiel der Header, die es zurückgeben könnte:

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

So einfach es auch ist, es hat einige Browser-Einschränkungen. Siehe http://caniuse.com/#feat=cors.

Answer 3

Sie können dies über den HTTP-Header steuern, indem Sie Access-Control-Allow-Origin hinzufügen. Wenn Sie es auf * setzen, akzeptieren Sie AJAX-Anfragen über mehrere Domains hinweg von jeder Domain.

Mit PHP ist es wirklich einfach, fügen Sie einfach die folgende Zeile in das Skript ein, auf das Sie außerhalb Ihrer Domain zugreifen möchten:

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

Vergessen Sie nicht, das Modul mod_headers in der httpd.conf zu aktivieren.

Answer 4

Sie müssen einen Blick auf die Same Origin Policy werfen:

Im Bereich der Informatik ist die Same Origin Policy ein wichtiges Sicherheitskonzept für eine Reihe von browserseitigen Programmiersprachen wie JavaScript. Die Richtlinie ermöglicht Skripts, die auf Seiten mit dem gleichen Ursprung ausgeführt werden, auf die Methoden und Eigenschaften der jeweils anderen zuzugreifen, ohne spezifische Einschränkungen, verhindert jedoch den Zugriff auf die meisten Methoden und Eigenschaften zwischen Seiten auf verschiedenen Websites.

Damit Sie Daten abrufen können, müssen diese:

das gleiche Protokoll und den gleichen Host haben

Sie müssen JSONP implementieren, um dies zu umgehen.

Answer 5

Ich musste die Webseite von der lokalen Festplatte laden "file:///C:/test/htmlpage.html", die "http://localhost/getxml.php" URL aufrufen und dies in den Browsern IE8+ und Firefox12+ ausführen, jQuery v1.7.2 Library verwenden, um den Boilerplate-Code zu minimieren. Nachdem ich Dutzende von Artikeln gelesen hatte, habe ich es schließlich herausgefunden. Hier ist meine Zusammenfassung.

• Der Server-Skript (.php, .jsp, ...) muss den HTTP-Antwortheader Access-Control-Allow-Origin: * zurückgeben.
• Bevor Sie jQuery-Ajax verwenden, setzen Sie diese Flagge in JavaScript: jQuery.support.cors = true;
• Sie können die Flagge einmal setzen oder jedes Mal, bevor Sie die jQuery-Ajax-Funktion verwenden.
• Jetzt kann ich ein .xml-Dokument in IE und Firefox lesen. Andere Browser habe ich nicht getestet.
• Das Antwortdokument kann plain/text, xml, json oder etwas anderes sein.

Hier ist ein Beispiel für einen jQuery-Ajax-Aufruf mit einigen Debug-Sysouts.

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) {
        // Zeige die Textantwort wie sie ist (Debug)
        alert(data);

        // Zeige XML-Feldwerte (Debug)
        //alert( $(data).find("title").text() );

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