Błąd XmlHttpRequest: Początek null nie jest dozwolony przez Access-Control-Allow-Origin

Tworzę stronę, która pobiera obrazy z Flickr i Panoramio dzięki obsłudze AJAX przez jQuery.

Strona Flickr działa dobrze, ale kiedy próbuję $.get(url, callback)z Panoramio, widzę błąd w konsoli Chrome:

XMLHttpRequest nie może załadować 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 . Pochodzenie null jest niedozwolone przez Access-Control-Allow-Origin.

Jeśli zapytam bezpośrednio ten adres URL z przeglądarki, działa dobrze. Co się dzieje i czy mogę to obejść? Czy niepoprawnie redaguję zapytanie, czy też jest to coś, co robi Panoramio, aby utrudnić to, co próbuję zrobić?

Google nie wykryło żadnych przydatnych dopasowań w komunikacie o błędzie .

EDYTOWAĆ

Oto przykładowy kod pokazujący 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);
  });
});

Możesz uruchomić przykład online .

EDYCJA 2

Dzięki Darinowi za pomoc w tym. POWYŻSZY KOD JEST ŹLE. Zamiast tego użyj tego:

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

Dla przypomnienia, o ile wiem, miałeś dwa problemy:

1. Nie przekazałeś specyfikatora typu „jsonp” $.get, więc używał zwykłego XMLHttpRequest. Jednak Twoja przeglądarka obsługiwała CORS (współdzielenie zasobów między źródłami), aby zezwolić na XMLHttpRequest w wielu domenach, jeśli serwer to OK. Właśnie tam Access-Control-Allow-Originwszedł nagłówek.

2. Wydaje mi się, że wspomniałeś, że uruchomiłeś go z pliku: // URL. Nagłówki CORS mają dwa sposoby sygnalizowania, że ​​XHR między domenami jest OK. Jednym z nich jest wysłanie Access-Control-Allow-Origin: *(które, jeśli dotarłeś do Flickr za pośrednictwem $.get, musieli to robić), a drugim wysłanie echa zawartości Originnagłówka. Jednak file://adresy URL generują wartość null, Originktórej nie można autoryzować za pomocą echa zwrotnego.

Pierwszy został rozwiązany w sposób okrężny dzięki sugestii Darina $.getJSON. To trochę magiczne, aby zmienić typ żądania z domyślnego „json” na „jsonp”, jeśli widzi podciąg callback=?w adresie URL.

To rozwiązało drugie, nie próbując już wykonywać żądania CORS z file://adresu URL.

Aby wyjaśnić to innym osobom, oto proste instrukcje rozwiązywania problemów:

1. Jeśli próbujesz użyć JSONP, upewnij się, że zachodzi jedna z następujących sytuacji:
   • Używasz $.geti ustawiasz dataTypena jsonp.
   • Używasz $.getJSONi zawarte callback=?w adresie URL.
2. Jeśli próbujesz wykonać XMLHttpRequest między domenami za pośrednictwem CORS ...
   1. Upewnij się, że testujesz za pośrednictwem http://. Skrypty działające za pośrednictwem file://mają ograniczoną obsługę CORS.
   2. Upewnij się, że przeglądarka faktycznie obsługuje CORS . (Opera i Internet Explorer spóźniają się na imprezę)

Być może musisz dodać HEADER do wywoływanego skryptu, oto co musiałem zrobić w PHP:

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

Więcej szczegółów w dziale AJAX ou usługi WEB (w języku francuskim).

W przypadku prostego projektu HTML:

cd project
python -m SimpleHTTPServer 8000

Następnie przejrzyj plik.

Działa dla mnie w Google Chrome v5.0.375.127 (dostaję alert):

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

Polecam również użycie tej $.getJSON()metody, ponieważ poprzednie nie działa na IE8 (przynajmniej na moim komputerze):

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

Możesz wypróbować online stąd .

AKTUALIZACJA:

Teraz, gdy pokazałeś swój kod, widzę problem z nim. Masz zarówno funkcję anonimową, jak i wbudowaną, ale oba zostaną wywołane processImages. Tak działa obsługa JSONP przez jQuery. Zauważ, jak to definiuję callback=?, abyś mógł korzystać z anonimowej funkcji. Możesz przeczytać więcej na ten temat w dokumentacji .

Inna uwaga jest taka, że ​​nie powinieneś nazywać eval. Parametr przekazany do Twojej anonimowej funkcji zostanie już przeanalizowany w JSON przez jQuery.

Dopóki żądany serwer obsługuje format danych JSON, użyj interfejsu JSONP (JSON Padding). Pozwala tworzyć zewnętrzne żądania domeny bez serwerów proxy lub wymyślnych nagłówków.

Jest to ta sama zasada pochodzenia , musisz użyć interfejsu JSON-P lub proxy działającego na tym samym hoście.

Udało nam się to za pomocą http.confpliku (edytowanego, a następnie zrestartowano usługę HTTP):

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

W polu Header set Access-Control-Allow-Origin "*"możesz podać dokładny adres URL.

Jeśli wykonujesz testy lokalne lub wywołujesz plik z czegoś takiego file://, musisz wyłączyć zabezpieczenia przeglądarki.

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

W moim przypadku ten sam kod działał poprawnie w przeglądarce Firefox, ale nie w Google Chrome. Konsola JavaScript przeglądarki Google Chrome powiedziała:

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"

Musiałem upuścić część www adresu URL Ajax, aby poprawnie pasowała do początkowego adresu URL i wtedy działało dobrze.

Nie wszystkie serwery obsługują jsonp. Wymaga od serwera ustawienia funkcji wywołania zwrotnego w wynikach. Używam tego, aby uzyskać odpowiedzi JSON z witryn, które zwracają czysty Json, ale nie obsługują JSON:

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

Używam serwera Apache, więc użyłem modułu mod_proxy. Włącz moduły:

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

Następnie dodaj:

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

Na koniec przekaż adres URL proxy do skryptu.

Jako ostatecznej noty dokumentacja Mozilla wyraźnie mówi, że

Powyższy przykład nie powiódłby się, gdyby nagłówek był symbolami wieloznacznymi jako: Access-Control-Allow-Origin: *. Ponieważ Access-Control-Allow-Origin wyraźnie wspomina http: //foo.example , treść rozpoznająca poświadczenie jest zwracana do wywołującej treści WWW.

W konsekwencji używanie „*” nie jest po prostu złą praktyką. Po prostu nie działa :)

Dla PHP - to działa dla mnie na Chrome, safari i Firefox

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

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

za pomocą axios wywołaj usługi php live z plikiem: //

Otrzymałem ten sam błąd w Chrome (nie testowałem innych przeglądarek). Stało się tak dlatego, że nawigowałem na domain.com zamiast www.domain.com. Trochę dziwne, ale mogłem rozwiązać problem, dodając następujące wiersze do .htaccess. Przekierowuje domain.com do www.domain.com i problem został rozwiązany. Jestem leniwym gościem sieciowym, więc prawie nigdy nie wpisuję www, ale najwyraźniej w niektórych przypadkach jest to wymagane.

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

Upewnij się, że używasz najnowszej wersji JQuery. Napotkaliśmy ten błąd dla JQuery 1.10.2 i błąd został rozwiązany po użyciu JQuery 1.11.1

Ludzie,

Wystąpił podobny problem. Ale używając Fiddlera udało mi się rozwiązać problem. Problem polega na tym, że adres URL klienta skonfigurowany w implementacji CORS po stronie interfejsu API sieci Web nie może zawierać końcowego ukośnika. Po przesłaniu żądania przez Google Chrome i sprawdzeniu karty TextView w sekcji Nagłówki Fiddlera komunikat o błędzie brzmi mniej więcej tak:

* „Określone źródło zasad twoja_klient_url: /” jest nieprawidłowe. Nie może kończyć się ukośnikiem. ”

To naprawdę dziwne, ponieważ działało bez żadnych problemów w Internet Explorerze, ale sprawiło mi ból głowy podczas testowania za pomocą Google Chrome.

Usunąłem ukośnik w kodzie CORS i ponownie skompilowałem interfejs API sieci Web, a teraz interfejs API jest dostępny bez żadnych problemów za pośrednictwem Chrome i Internet Explorera. Spróbuj tego.

Dzięki, Andy

W powyższym rozwiązaniu opublikowanym przez CodeGroover występuje niewielki problem. Jeśli zmienisz plik, będziesz musiał zrestartować serwer, aby faktycznie użyć zaktualizowanego pliku (przynajmniej w moim przypadku).

Więc szukając trochę, znalazłem ten Aby użyć:

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

A potem będzie służyć http://localhost:8000.