javascript domain - jQuery AJAX Crossdomäne





avoid cors (13)


Dies ist möglich, aber Sie müssen JSONP und nicht JSON verwenden. Stefans Link wies Sie in die richtige Richtung. Die jQuery AJAX-Seite enthält weitere Informationen zu JSONP.

Remy Sharp hat ein ausführliches Beispiel mit PHP .

Hier sind zwei Seiten, test.php und 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);
?>

Jetzt mein Problem: wenn diese beiden Dateien auf demselben Server (entweder localhost oder Webserver) sind, funktioniert es und alert("Success") wird aufgerufen; Wenn es auf verschiedenen Servern ist, also testserver.php auf dem Webserver und test.php auf localhost, funktioniert es nicht, und die alert("Error") wird ausgeführt. Auch wenn die URL in Ajax zu http://domain.com/path/to/file/testserver.php geändert wird




Ich musste die Webseite von der lokalen Festplatte "file: /// C: /test/htmlpage.html" laden, die URL "http: //localhost/getxml.php" aufrufen, und dies in den Browsern IE8 + und Firefox12 +, benutze jQuery v1 .7.2 lib zur Minimierung des Standardcodes. Nach dem Lesen von Dutzenden von Artikeln endlich herausgefunden. Hier ist meine Zusammenfassung.

  • Server-Skript (.php, .jsp, ...) muss HTTP-Antwortheader zurückgeben Access-Control-Allow-Origin: *
  • Bevor Sie jQuery ajax verwenden, setzen Sie dieses Flag in javascript: jQuery.support.cors = true;
  • Sie können das Flag einmalig oder jedes Mal setzen, bevor Sie die jQuery ajax-Funktion verwenden
  • Jetzt kann ich .xml Dokument in IE und Firefox lesen. Andere Browser habe ich nicht getestet.
  • Antwortdokument kann plain / text, xml, json oder irgendetwas 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) {
        // 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);
    }
});



Sie können dies über den HTTP-Header steuern, indem Sie Access-Control-Allow-Origin hinzufügen. Wenn Sie ihn auf * setzen, werden domainübergreifende AJAX-Anfragen von jeder Domain akzeptiert.

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, mod_headers Modul in httpd.conf zu aktivieren.




Die Browser-Sicherheit verhindert, dass ein Ajax-Anruf von einer Seite, die in einer Domäne gehostet wird, zu einer Seite erfolgt, die in einer anderen Domäne gehostet wird. Dies nennt man die " same-origin policy ".




Verwenden Sie für übergreifende AJAX-Anfragen das folgende jQuery-Plugin. https://github.com/jinujd/jQuery-Async-Form Es funktioniert asynchron, ohne neu zu laden. Es ist nicht AJAX, aber es macht die Aufgabe in den meisten Fällen




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

Das Echo könnte falsch sein, es ist schon eine Weile her, seit ich PHP benutzt habe. In jedem Fall müssen Sie callbackName('jsonString') beachten Sie die Anführungszeichen. jQuery übergibt seinen eigenen Callback-Namen, also müssen Sie diesen aus den GET-Parametern holen.

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




Es ist richtig, dass die Richtlinie für denselben Ursprung verhindert, dass JavaScript domänenübergreifend Anfragen absetzt, aber die CORS-Spezifikation erlaubt genau die Art von API-Zugriff, nach der Sie suchen, und wird vom aktuellen Stapel der wichtigsten Browser unterstützt.

Informationen zum Aktivieren der werkübergreifenden Ressourcenfreigabe für Client und Server:

http://enable-cors.org/

"Cross-Origin Resource Sharing (CORS) ist eine Spezifikation, die einen wirklich offenen Zugriff über Domänengrenzen hinweg ermöglicht. Wenn Sie öffentliche Inhalte bereitstellen, sollten Sie CORS verwenden, um sie für den universellen JavaScript / Browser-Zugriff zu öffnen."




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

Die Methode, um dies zu tun, wird natürlich von Sprache zu Sprache variieren. Hier ist es in Rails:

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

In diesem Beispiel say_hello Aktion say_hello AJAX-Anfragen von einer beliebigen Domäne und gibt eine Antwort von "hallo!" Zurück.

Hier ist ein Beispiel für die 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 ist, es hat einige Browser-Einschränkungen. Siehe http://caniuse.com/#feat=cors .




Ich benutze Apache Server, also habe ich mod_proxy Modul verwendet. Module aktivieren:

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

Dann füge hinzu:

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

Übergeben Sie schließlich die Proxy-URL an Ihr Skript.




Sie müssen sich die gleiche Origin Policy ansehen:

In der Computerbranche ist die gleiche Ursprungsrichtlinie ein wichtiges Sicherheitskonzept für eine Reihe browserseitiger Programmiersprachen wie JavaScript. Die Richtlinie lässt Skripts, die auf Seiten laufen, die von derselben Site stammen, ohne besondere Einschränkungen auf die Methoden und Eigenschaften des jeweils anderen zugreifen, verhindert jedoch den Zugriff auf die meisten Methoden und Eigenschaften auf Seiten verschiedener Sites.

Damit Sie Daten bekommen können, muss es sein:

Gleiches Protokoll und Host

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







Aus den Jquery-Dokumenten ( Link ):

  • Aufgrund der Sicherheitseinschränkungen des Browsers unterliegen die meisten "Ajax" -Anforderungen derselben Herkunftsrichtlinie. Die Anforderung kann Daten aus einer anderen Domäne, Subdomäne oder einem anderen Protokoll nicht erfolgreich abrufen.

  • Skript- und JSONP-Anforderungen unterliegen nicht denselben Richtlinieneinschränkungen für die Herkunft.

Also würde ich es nehmen, dass Sie Jsonp für die Anfrage verwenden müssen. Aber habe das selbst nicht versucht.








javascript jquery ajax json cross-domain