XmlHttpRequest-Fehler: Origin null ist von Access-Control-Allow-Origin nicht zulässig

Ich entwickle eine Seite, die Bilder von Flickr und Panoramio über die AJAX-Unterstützung von jQuery abruft.

Die Flickr-Seite funktioniert einwandfrei, aber wenn ich es $.get(url, callback)von Panoramio aus versuche, wird in der Chrome-Konsole ein Fehler angezeigt:

XMLHttpRequest kann http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150 nicht laden . Origin null ist von Access-Control-Allow-Origin nicht zulässig.

Wenn ich diese URL direkt von einem Browser abfrage, funktioniert es einwandfrei. Was ist los und kann ich das umgehen? Verfasse ich meine Abfrage falsch oder unternimmt Panoramio dies, um zu verhindern, dass ich versuche, dies zu tun?

Google hat in der Fehlermeldung keine nützlichen Übereinstimmungen gefunden .

BEARBEITEN

Hier ist ein Beispielcode, der das Problem zeigt:

$().ready(function () {
  var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150';

  $.get(url, function (jsonp) {
    var processImages = function (data) {
      alert('ok');
    };

    eval(jsonp);
  });
});

Sie können das Beispiel online ausführen .

BEARBEITEN 2

Vielen Dank an Darin für seine Hilfe. Der obige Code ist falsch. Verwenden Sie stattdessen Folgendes:

$().ready(function () {
  var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150&callback=?';

  $.get(url, function (data) {
    // can use 'data' in here...
  });
});

Soweit ich das beurteilen kann, hatten Sie zwei Probleme:

1. Sie haben Ihrem Typ keinen "jsonp" -Typbezeichner übergeben $.get, daher wurde ein gewöhnlicher XMLHttpRequest verwendet. Ihr Browser unterstützte jedoch CORS (Cross-Origin Resource Sharing), um domänenübergreifendes XMLHttpRequest zuzulassen, wenn der Server dies genehmigt hat. Hier kam der Access-Control-Allow-OriginHeader ins Spiel.

2. Ich glaube, Sie haben erwähnt, dass Sie es von einer Datei aus ausführen: // URL. Es gibt zwei Möglichkeiten für CORS-Header, um zu signalisieren, dass eine domänenübergreifende XHR in Ordnung ist. Eine ist das Senden Access-Control-Allow-Origin: *(was, wenn Sie Flickr über $.geterreicht haben, das getan haben muss), während die andere den Inhalt des OriginHeaders zurücksendet. Allerdings file://produzieren URLs eine Null Origin, die nicht über echo zurück genehmigt werden.

Das erste Problem wurde auf Umwegen durch Darins Vorschlag gelöst $.getJSON. Es ist ein wenig magisch, den Anforderungstyp von "json" in "jsonp" zu ändern, wenn die Teilzeichenfolge callback=?in der URL angezeigt wird .

Dies löste das zweite Problem, indem nicht mehr versucht wurde, eine CORS-Anforderung über eine file://URL auszuführen .

Um dies für andere Personen zu verdeutlichen, finden Sie hier die einfachen Anweisungen zur Fehlerbehebung:

1. Wenn Sie versuchen, JSONP zu verwenden, stellen Sie sicher, dass einer der folgenden Fälle der Fall ist:
   • Sie verwenden $.getund einstellen dataTypeauf jsonp.
   • Sie verwenden $.getJSONund sind callback=?in der URL enthalten.
2. Wenn Sie versuchen, eine domänenübergreifende XMLHttpRequest über CORS durchzuführen ...
   1. Stellen Sie sicher, dass Sie über testen http://. Skripte, die über ausgeführt file://werden, unterstützen CORS nur eingeschränkt.
   2. Stellen Sie sicher, dass der Browser CORS tatsächlich unterstützt . (Opera und Internet Explorer kommen zu spät zur Party)

Sie müssen vielleicht einen HEADER in Ihr aufgerufenes Skript einfügen. Folgendes musste ich in PHP tun:

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

Weitere Informationen finden Sie im domänenübergreifenden AJAX oder im WEB (auf Französisch).

Für ein einfaches HTML-Projekt:

cd project
python -m SimpleHTTPServer 8000

Dann durchsuchen Sie Ihre Datei.

Funktioniert für mich unter Google Chrome v5.0.375.127 (ich erhalte die Benachrichtigung):

$.get('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150',
function(json) {
    alert(json.photos[1].photoUrl);
});

Außerdem würde ich empfehlen, stattdessen die $.getJSON()Methode zu verwenden, da die vorherige unter IE8 (zumindest auf meinem Computer) nicht funktioniert:

$.getJSON('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150', 
function(json) {
    alert(json.photos[1].photoUrl);
});

Sie können es versuchen online von hier aus .

AKTUALISIEREN:

Nachdem Sie Ihren Code angezeigt haben, kann ich das Problem damit erkennen. Sie haben sowohl eine anonyme Funktion als auch eine Inline-Funktion, aber beide werden aufgerufenprocessImages . So funktioniert die JSONP-Unterstützung von jQuery. Beachten Sie, wie ich das definiere, callback=?damit Sie eine anonyme Funktion verwenden können. Weitere Informationen finden Sie in der Dokumentation .

Eine andere Bemerkung ist, dass Sie eval nicht nennen sollten. Der an Ihre anonyme Funktion übergebene Parameter wird bereits von jQuery in JSON analysiert.

Verwenden Sie die JSONP-Schnittstelle (JSON Padding), solange der angeforderte Server das JSON-Datenformat unterstützt. Sie können damit externe Domänenanforderungen ohne Proxyserver oder ausgefallene Header-Inhalte stellen.

Es ist dieselbe Ursprungsrichtlinie . Sie müssen eine JSON-P-Schnittstelle oder einen Proxy verwenden, der auf demselben Host ausgeführt wird.

Wir haben es über die http.confDatei verwaltet (den HTTP-Dienst bearbeitet und dann neu gestartet):

<Directory "/home/the directory_where_your_serverside_pages_is">
    Header set Access-Control-Allow-Origin "*"
    AllowOverride all
    Order allow,deny
    Allow from all
</Directory>

In der Header set Access-Control-Allow-Origin "*"können Sie eine genaue URL eingeben.

Wenn Sie lokale Tests durchführen oder die Datei von so etwas wie aufrufen file:// , müssen Sie die Browsersicherheit deaktivieren.

Auf MAC: open -a Google\ Chrome --args --disable-web-security

In meinem Fall funktionierte derselbe Code in Firefox einwandfrei, jedoch nicht in Google Chrome. In der JavaScript-Konsole von Google Chrome heißt es:

XMLHttpRequest cannot load http://www.xyz.com/getZipInfo.php?zip=11234. 
Origin http://xyz.com is not allowed by Access-Control-Allow-Origin.
Refused to get unsafe header "X-JSON"

Ich musste den WWW-Teil der Ajax-URL löschen, damit er korrekt mit der Ursprungs-URL übereinstimmt, und dann funktionierte er einwandfrei.

Nicht alle Server unterstützen jsonp. Der Server muss die Rückruffunktion in den Ergebnissen festlegen. Ich verwende dies, um JSON-Antworten von Websites zu erhalten, die reines JSON zurückgeben, aber JSONP nicht unterstützen:

function AjaxFeed(){

    return $.ajax({
        url:            'http://somesite.com/somejsonfile.php',
        data:           {something: true},
        dataType:       'jsonp',

        /* Very important */
        contentType:    'application/json',
    });
}

function GetData() {
    AjaxFeed()

    /* Everything worked okay. Hooray */
    .done(function(data){
        return data;
    })

    /* Okay jQuery is stupid manually fix things */
    .fail(function(jqXHR) {

        /* Build HTML and update */
        var data = jQuery.parseJSON(jqXHR.responseText);

        return data;
    });
}

Ich benutze den Apache-Server, also habe ich das Modul mod_proxy 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 abschließend die Proxy-URL an Ihr Skript.

Als letzte Anmerkung der sagt Mozilla Dokumentation ausdrücklich , dass

Das obige Beispiel würde fehlschlagen, wenn der Header mit einem Platzhalter versehen wäre: Access-Control-Allow-Origin: *. Da in Access-Control-Allow-Origin http: //foo.example explizit erwähnt wird , wird der Inhalt mit Anmeldeinformationen an den aufrufenden Webinhalt zurückgegeben.

Infolgedessen ist es nicht einfach eine schlechte Praxis, '*' zu verwenden. Funktioniert einfach nicht :)

Für PHP - das funktioniert für mich auf Chrome, Safari und Firefox

https://w3c.github.io/webappsec-cors-for-developers/#avoid-returning-access-control-allow-origin-null

header('Access-Control-Allow-Origin: null');

mit axios call php live services mit datei: //

Ich habe auch den gleichen Fehler in Chrome erhalten (ich habe andere Browser nicht getestet). Es lag an der Tatsache, dass ich auf domain.com anstatt auf www.domain.com navigierte. Ein bisschen seltsam, aber ich könnte das Problem lösen, indem ich die folgenden Zeilen zu .htaccess hinzufüge. Domain.com wird auf www.domain.com umgeleitet und das Problem wurde behoben. Ich bin ein fauler Webbesucher, daher schreibe ich fast nie das WWW, aber anscheinend ist es in einigen Fällen erforderlich.

RewriteEngine on
RewriteCond %{HTTP_HOST} ^domain\.com$ [NC]
RewriteRule ^(.*)$ http://www.domain.com/$1 [R=301,L]

Stellen Sie sicher, dass Sie die neueste Version von JQuery verwenden. Wir hatten diesen Fehler für JQuery 1.10.2 und der Fehler wurde nach Verwendung von JQuery 1.11.1 behoben

Leute,

Ich bin auf ein ähnliches Problem gestoßen. Aber mit Fiddler konnte ich das Problem lösen. Das Problem besteht darin, dass die Client-URL, die in der CORS-Implementierung auf der Web-API-Seite konfiguriert ist, keinen abschließenden Schrägstrich enthalten darf. Nachdem Sie Ihre Anfrage über Google Chrome gesendet haben, überprüfen Sie die Textview - Registerkarte des Headers besagt Abschnitt von Fiddler, die Fehlermeldung etwas wie folgt aus :

* "Der angegebene Richtlinienursprung your_client_url: / 'ist ungültig. Er kann nicht mit einem Schrägstrich enden."

Das ist wirklich eigenartig, weil es im Internet Explorer ohne Probleme funktioniert hat, aber mir beim Testen mit Google Chrome Kopfschmerzen bereitet hat.

Ich habe den Schrägstrich im CORS-Code entfernt und die Web-API neu kompiliert. Jetzt ist die API ohne Probleme über Chrome und Internet Explorer zugänglich. Bitte probieren Sie es aus.

Danke, Andy

In der von CodeGroover oben veröffentlichten Lösung gibt es ein kleines Problem: Wenn Sie eine Datei ändern, müssen Sie den Server neu starten, um die aktualisierte Datei tatsächlich zu verwenden (zumindest in meinem Fall).

Also habe ich ein bisschen gesucht und dieses gefunden. Zu verwenden:

sudo npm -g install simple-http-server # to install
nserver # to use

Und dann wird es bei dienen http://localhost:8000.