[javascript] XmlHttpRequest-Fehler: Origin Null ist nicht von Access-Control-Allow-Origin zulässig



Answers

Sie müssen vielleicht einen HEADER in Ihrem aufgerufenen Skript hinzufügen, hier ist, was ich in PHP tun musste:

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

Weitere Details finden Sie in der Cross-Domain AJAX ou services WEB (auf Französisch).

Question

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

Die Flickr-Seite funktioniert gut, aber wenn ich versuche, $.get(url, callback) von Panoramio zu erhalten, sehe ich einen Fehler in der Chrome-Konsole:

XMLHttpRequest kann nicht geladen werden 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 . Origin Null ist nicht zulässig von Access-Control-Allow-Origin.

Wenn ich diese URL direkt von einem Browser abfrage, funktioniert das einwandfrei. Was ist los und kann ich das umgehen? Bilde ich meine Suchanfrage falsch, oder ist das etwas, das Panoramio tut, um zu verhindern, was ich versuche?

Google hat in der Fehlermeldung keine sinnvollen Ü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

Danke an Darin für seine Hilfe dabei. DER OBIGE CODE IST FALSCH. Benutze das stattdessen:

$().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...
  });
});






Nicht alle Server unterstützen jsonp. Es erfordert, dass der Server die Rückruffunktion in seinen Ergebnissen festlegt. Ich verwende dies, um JSON-Antworten von Seiten 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;
    });
}



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




Wir haben es über die Datei http.conf (bearbeitet und dann den HTTP-Dienst 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.




Funktioniert für mich auf Google Chrome v5.0.375.127 (Ich bekomme die Warnung):

$.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 Ihnen empfehlen, stattdessen die Methode $.getJSON() verwenden, da die vorherige nicht auf IE8 funktioniert (zumindest auf meinem Rechner):

$.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 online von hier aus versuchen.

AKTUALISIEREN:

Jetzt, wo Sie Ihren Code angezeigt haben, kann ich das Problem damit sehen. Sie haben sowohl eine anonyme Funktion als auch eine Inline-Funktion, aber beide werden als processImages . So funktioniert die JSONP-Unterstützung von jQuery. Beachten Sie, wie ich den callback=? damit Sie eine anonyme Funktion verwenden können. Sie können mehr $.getJSON() lesen.

Eine andere Bemerkung ist, dass du eval nicht anrufen solltest. Der an Ihre anonyme Funktion übergebene Parameter wird bereits von jQuery in JSON geparst.




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

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




Es gibt ein kleines Problem in der in diesem Link veröffentlichten Lösung. 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 ein bisschen suchen, ich habe dieses gefunden

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

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






Links