Utknąłem z tym problemem CORS, mimo że ustawiłem serwer (nginx / node.js) z odpowiednimi nagłówkami.
Widzę w okienku Sieć Chrome -> Nagłówki odpowiedzi:
Access-Control-Allow-Origin:http://localhost
co powinno załatwić sprawę.
Oto kod, którego teraz używam do testowania:
var xhr = new XMLHttpRequest();
xhr.onload = function() {
console.log('xhr loaded');
};
xhr.open('GET', 'http://stackoverflow.com/');
xhr.send();
dostaję
XMLHttpRequest nie może załadować http://stackoverflow.com/ . Pochodzenie http: // localhost nie jest dozwolone przez Access-Control-Allow-Origin.
Podejrzewam, że jest to problem w skrypcie klienta, a nie w konfiguracji serwera ...
Odpowiedzi:
Chrome nie obsługuje localhost dla żądań CORS (błąd otwarty w 2010 r., Oznaczony WontFix w 2014 r.).
Aby obejść ten problem, możesz użyć domeny typu
lvh.me
(która wskazuje na 127.0.0.1 podobnie jak localhost) lub uruchomić chrome z--disable-web-security
flagą (zakładając, że właśnie testujesz).źródło
Grrrr...
Zgodnie z odpowiedzią @ Beau Chrome nie obsługuje żądań CORS hostów lokalnych i nie ma w tym kierunku żadnych zmian.
Korzystam z rozszerzenia Allow-Control-Allow-Origin: * Rozszerzenie Chrome, aby obejść ten problem. Rozszerzenie doda niezbędne nagłówki HTTP dla CORS:
Kod źródłowy został opublikowany na Github .
Pamiętaj, że rozszerzenie domyślnie filtruje wszystkie adresy URL. Może to spowodować uszkodzenie niektórych stron internetowych (na przykład: Dropbox). Zmieniłem to, aby filtrować tylko adresy URL hosta lokalnego z następującym filtrem adresów URL
źródło
Access-Control-Allow-Credentials: true
ponieważ ustawiaAccess-Control-Allow-Origin
je*
i matrue
i*
jest zablokowane przez przeglądarki. Jeśli używasz poświadczeń true, musisz użyć źródła innego niż symbol wieloznaczny. Polecam Moesif Origins i CORS Changer Extension, który pozwala zmieniać nagłówki w dowolny sposób.Prawdziwy problem polega na tym, że jeśli ustawimy
-Allow-
dla wszystkich żądań (OPTIONS
iPOST
), Chrome je anuluje. Poniższy kod działa dla mnie zPOST
LocalHost z Chromeźródło
Chrome będzie dobrze wysyłać żądania do CORS z
localhost
pochodzenia. To nie jest problem z Chrome.Powodem, dla którego nie można załadować,
http://stackoverflow.com
jest to, żeAccess-Control-Allow-Origin
nagłówki nie zezwalały na Twojelocalhost
pochodzenie.źródło
Szybka i brudna poprawka rozszerzenia Chrome:
Moesif Orign & CORS Changer
Chrome obsługuje jednak żądania dotyczące różnych źródeł z hosta lokalnego. Pamiętaj, aby dodać nagłówek
Access-Control-Allow-Origin
dlalocalhost
.źródło
Żadne z rozszerzeń nie działało dla mnie, więc zainstalowałem prosty lokalny serwer proxy. W moim przypadku https://www.npmjs.com/package/local-cors-proxy Jest to konfiguracja 2-minutowa:
(z ich strony)
Dla mnie zadziałało: twoja aplikacja wywołuje proxy, który dzwoni do serwera. Zero problemów CORS.
źródło
Postanowiłem nie dotykać nagłówków i zamiast tego przekierowywać po stronie serwera, a to działa jak urok.
Poniższy przykład dotyczy bieżącej wersji Angulara (obecnie 9) i prawdopodobnie każdego innego frameworka używającego webpacks DevServer. Ale myślę, że ta sama zasada będzie działać na innych backendach.
Dlatego używam następującej konfiguracji w pliku proxy.conf.json :
W przypadku Angulara obsługuję w tej konfiguracji:
Wolę używać proxy w poleceniu służyć, ale można również umieścić tę konfigurację do angular.json tak:
Zobacz też:
https://www.techiediaries.com/fix-cors-with-angular-cli-proxy-configuration/
https://webpack.js.org/configuration/dev-server/#devserverproxy
źródło