XmlHttpRequest Fehler: Ursprung null nicht von Access-Control-Allow-Origin ist erlaubt

StackOverflow https://stackoverflow.com/questions/3595515

Frage

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

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

XMLHttpRequest nicht 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 . Herkunft null ist nicht zulässig, die von Access-Control-Allow-Origin.

Wenn ich Abfrage dieser URL in einem Browser funktioniert es direkt in Ordnung. Was ist los, und kann ich das umgehen? Bin ich meine Frage falsch zu komponieren, oder ist dies etwas, dass Panoramio tut zu behindern, was ich versuche zu tun?

Google hat wieder auftauchen keine nützlichen Ergebnisse auf dem Fehlermeldung .

Bearbeiten

Hier ist ein Beispielcode, der zeigt das Problem: 

$().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 führen Sie das Beispiel Online .

EDIT 2

Dank Darin für seine Hilfe bei diesem. Das oben gezeigte Code ist falsch Verwenden Sie 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...
  });
});
War es hilfreich?

Lösung

Für das Protokoll, soweit ich das beurteilen kann, hat man zwei Probleme:

  1. Sie haben einen „JSONP“ Typspezifizierer auf Ihre $.get nicht vorbei, so dass es eine gewöhnliche XMLHttpRequest wurde mit. Jedoch Ihr Browser unterstützt CORS (Cross-Origin Resource Sharing) Cross-Domain-XMLHttpRequest zu ermöglichen, wenn der Server es OKed. Das ist, wo der Access-Control-Allow-Origin Kopf kam.

  2. Ich glaube, Sie erwähnten Sie es aus einer Datei ausgeführt wurden: // URL. Es gibt zwei Möglichkeiten für CORS-Header, um zu signalisieren, dass eine domänenübergreifende XHR OK ist. Eine davon ist Access-Control-Allow-Origin: * zu senden (die, wenn Sie Flickr über $.get erreichten, müssen sie es bisher getan haben), während der andere den Inhalt des Origin Kopf Echo zurück. Allerdings produziert file:// URLs einen Null-Origin, die zugelassen werden können, nicht über echo zurück.

Die erste auf Umwegen von Darin Vorschlag zur Verwendung $.getJSON gelöst wurde. Es tut eine wenig Magie, um den Anforderungstyp von seinem Standardwert „json“ auf „JSONP“ zu ändern, wenn sie den Teil callback=? in der URL sehen.

Das löste das zweite von nicht mehr versucht, eine CORS auszuführen von einem file:// URL anfordern.

für andere Menschen zu verdeutlichen, hier sind die einfachen Anweisungen zur Fehlerbehebung:

  1. Wenn Sie versuchen, JSONP zu verwenden, stellen Sie sicher, dass Sie eine der folgenden ist der Fall:
    • Sie verwenden $.get und Satz dataType jsonp.
    • Sie verwenden $.getJSON und enthalten callback=? in der URL.
  2. Wenn Sie versuchen, einen Cross-Domain-XMLHttpRequest über CORS zu tun ...
    1. Stellen Sie sicher, dass Sie über http:// testen. Scripts über file:// ausgeführt haben begrenzte Unterstützung für CORS.
    2. Stellen Sie sicher, dass der Browser tatsächlich unterstützt CORS . (Opera und Internet Explorer sind spät zur Party)

Andere Tipps

Sie müssen vielleicht einen Header in Ihrem genannt Skript hinzufügen, hier ist das, was ich in PHP zu tun hatte: 

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

Mehr Details in Cross-Domain-AJAX ou Dienste WEB (auf Französisch).

Für ein einfaches HTML-Projekt: 

cd project
python -m SimpleHTTPServer 8000

Sie dann Ihre Datei.

Arbeiten für mich auf Google Chrome v5.0.375.127 (ich die Warnung erhalten): 

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

Auch würde ich Ihnen empfehlen die Verwendung von $.getJSON() Verfahren statt, wie das vorherige nicht funktioniert auf IE8 (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 versuchen, es online von hier .

UPDATE:

Nachdem Sie nun Ihren Code gezeigt haben, kann ich das Problem mit ihm sehen. Sie haben beide eine anonyme Funktion und Inline-Funktion, aber beide werden processImages aufgerufen werden. Das ist, wie jQuery JSONP Unterstützung funktioniert. Beachten Sie, wie ich die Definition der callback=?, so dass Sie eine anonyme Funktion verwenden können. Sie können mehr lesen darüber in der Dokumentation .

Eine weitere Anmerkung ist, dass Sie nicht eval nennen sollten. Der Parameter auf Ihre anonyme Funktion übergeben wird bereits in JSON von jQuery analysiert werden.

Solange der angeforderte Server das JSON-Datenformat unterstützt, verwenden Sie die JSONP (JSON Padding) -Schnittstelle. Es ermöglicht Ihnen, externe Domain-Anfragen ohne Proxy-Server oder ausgefallenen Kopf Sachen zu machen.

Es ist der Same Origin Policy , haben Sie eine JSON-P-Schnittstelle oder einen Proxy zu verwenden, läuft auf dem gleichen Host.

Wir haben es geschafft es über die http.conf Datei (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 setzen.

Wenn Sie lokale Tests oder rufen Sie die Datei von so etwas wie file:// tun, dann müssen Sie deaktivieren Browser-Sicherheit.

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

In meinem Fall gleicher Code hat gut funktioniert auf Firefox, aber nicht auf Google Chrome. Google Chrome JavaScript-Konsole sagte: 

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 hatte das www Teil der Ajax-URL fallen für sie richtig mit dem Ursprungs-URL übereinstimmen und es funktionierte gut dann.

Nicht alle Server unterstützen JSONP. Es erfordert den Server die Callback-Funktion in seinen Ergebnissen zu setzen. Ich benutze diese Json Antworten von Seiten zu bekommen, die reine json zurück, aber nicht unterstützen JSONP: 

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

verwende ich Apache-Server, so dass ich mod_proxy Modul benutzt habe. Aktivieren Module: 

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

Dann fügen Sie: 

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

Schließlich passieren Proxy-URL zu Ihrem Script.

Als letzte Anmerkung der Mozilla Dokumentation ausdrücklich sagt dass

Das obige Beispiel würde fehlschlagen, wenn der Header wie wurde Wildcards: Access-Control-Allow-Origin:. * Da die Access-Control-Allow-Origin erwähnt ausdrücklich http: / /foo.example , Der Berechtigungsnachweis erkennenden Inhalt wird an die aufrufende Bahn zurück Inhalt.

Als Folge ist eine nicht einfach eine schlechte Praxis zu verwenden ‚*‘. Einfach nicht funktioniert:)

Ich habe auch den gleichen Fehler in Chrome (ich habe keine anderen Browser testen). Es war aufgrund der Tatsache, dass ich auf domain.com statt www.domain.com wurde die Navigation. Ein bisschen seltsam, aber ich konnte das Problem indem Sie die folgenden Zeilen zu .htaccess lösen. Er leitet domain.com zu www.domain.com und das Problem war gelöst. Ich bin ein fauler Web-Besucher so dass ich fast nie das www geben, aber anscheinend in manchen Fällen kann es erforderlich ist. 

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

Achten Sie darauf, die neueste Version von JQuery verwenden. Wir waren mit Blick auf diesen Fehler für JQuery 1.10.2 und der Fehler wurde behoben, nachdem mit JQuery 1.11.1

Leute,

Ich lief in ein ähnliches Problem. Aber der Einsatz von Fiddler, konnte ich auf die Frage erhalten. Das Problem ist, dass die Client-URL, die in der CORS Implementierung auf der Web-API-Seite konfiguriert ist, darf keinen Hinterschrägstrich hat. Nachdem Sie Ihre Anfrage über Google Chrome einreichen und prüfen Sie die Textview des Header von Fiddler, die Fehlermeldung besagt, dies so etwas wie:

* "Der angegebene Politik Herkunft your_client_url:.. /‘ Ist ungültig Es kann nicht mit einem Schrägstrich enden"

Dies ist ein echtes schrullig, weil es ohne Probleme im Internet Explorer gearbeitet, aber gab mir Kopfschmerzen, wenn Google Chrome testen.

entfernte ich den Schrägstrich im Code CORS und neu kompilierte den Web-API, und nun die API ist über Chrome und Internet Explorer ohne Probleme. Bitte geben Sie diese einen Schuss.

Danke, Andy

Es gibt ein kleines Problem in der Lösung von CodeGroover oben geschrieben, wo, wenn Sie eine Datei ändern, werden Sie haben Sie den Server neu zu starten, um tatsächlich die aktualisierte Datei zu verwenden (zumindest in meinem Fall).

So ein bisschen suchen, fand ich dieses verwenden: 

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

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

Für PHP - diese Arbeit für mich in 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 Anruf php Live-Dienste mit file: //

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top