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...
});
});
źródło
iframe
, w któredocument.write
się angażujesz?file:///C:/
). Nieiframe
jest zaangażowany.Odpowiedzi:
Dla przypomnienia, o ile wiem, miałeś dwa problemy:
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 tamAccess-Control-Allow-Origin
wszedł nagłówek.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ściOrigin
nagłówka. Jednakfile://
adresy URL generują wartość null,Origin
któ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ągcallback=?
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:
$.get
i ustawiaszdataType
najsonp
.$.getJSON
i zawartecallback=?
w adresie URL.http://
. Skrypty działające za pośrednictwemfile://
mają ograniczoną obsługę CORS.źródło
callback=?
nie działało dla mnie, ale działałojsonp=?
. Jakieś wytłumaczenie tego?http://
? Czy istnieje sposób, aby po prostu otworzyć plik przy użyciu tego protokołu?Być może musisz dodać HEADER do wywoływanego skryptu, oto co musiałem zrobić w PHP:
Więcej szczegółów w dziale AJAX ou usługi WEB (w języku francuskim).
źródło
W przypadku prostego projektu HTML:
Następnie przejrzyj plik.
źródło
POST
otrzymać prośby:code 501, message Unsupported method ('POST')
dla googli.Działa dla mnie w Google Chrome v5.0.375.127 (dostaję alert):
Polecam również użycie tej
$.getJSON()
metody, ponieważ poprzednie nie działa na IE8 (przynajmniej na moim komputerze):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.
źródło
?
wówczas zwrócony JSON zostanie otoczony nawiasami. Nie definiujesz parametru dla funkcji zwrotnej, a wartośćthis
nie wydaje się mieć obiektu odpowiedzi (przynajmniej.data
jest tonull
).callback=?
komendy jQuery generuje losową nazwę funkcji wewnętrznie, co powoduje wywołanie anonimowej funkcji, którą przekazujesz.getJSON
. Doceniany.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.
źródło
Jest to ta sama zasada pochodzenia , musisz użyć interfejsu JSON-P lub proxy działającego na tym samym hoście.
źródło
Udało nam się to za pomocą
http.conf
pliku (edytowanego, a następnie zrestartowano usługę HTTP):W polu
Header set Access-Control-Allow-Origin "*"
możesz podać dokładny adres URL.źródło
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
źródło
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:
Musiałem upuścić część www adresu URL Ajax, aby poprawnie pasowała do początkowego adresu URL i wtedy działało dobrze.
źródło
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:
źródło
Używam serwera Apache, więc użyłem modułu mod_proxy. Włącz moduły:
Następnie dodaj:
Na koniec przekaż adres URL proxy do skryptu.
źródło
Jako ostatecznej noty dokumentacja Mozilla wyraźnie mówi, że
W konsekwencji używanie „*” nie jest po prostu złą praktyką. Po prostu nie działa :)
źródło
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
za pomocą axios wywołaj usługi php live z plikiem: //
źródło
header('Access-Control-Allow-Origin: '.( trim($_SERVER['HTTP_REFERER'],'/') ?:'null'),true);
zezwala na krzyżowanie źródła ze zdalnego serwera na inny i spada do (ciąg) null dla pliku lokalnego.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.
źródło
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
źródło
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
źródło
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ć:
A potem będzie służyć
http://localhost:8000
.źródło