NAPRAW: Brak błędu nagłówka access-control-allow-origin w Angular

Jednym z najczęstszych komunikatów o błędach, jakie programiści Angular mogą napotkać w swojej codziennej pracy, jest: brak nagłówka access-control-allow-origin w żądanym zasobie.

To nie jest specyficzny problem Angulara, ale CORS (Problem z nagłówkiem Cross-Origin Resource Sharing). Może to oznaczać, że serwer zaplecza jest skonfigurowany do pracy na innym porcie lub domenie.

---

Jak naprawić błąd braku kontroli dostępu w systemie Windows 10?

1. Wprowadź zmiany na poziomie serwera

Jeśli masz dostęp do serwera, włącz żądania CROS, dodając Kontrola dostępu-Zezwól-Pochodzenie: * nagłówek. Następnie skonfiguruj korsa wpis, pod system.serwer WWW w web.config plik, jak w poniższym przykładzie.

• ”1.0″?
• włączone="prawdziwe">
• pochodzenie=“ https://someorigin.domain.com”>
• metoda="OTRZYMAĆ"/>
• metoda="GŁOWA"/>
• </system.webServer>

Tutaj, korsa pozwoli OTRZYMAĆ i GŁOWA prośby od https://someorigin.domain.com/.

Ponadto, jeśli używasz IIS (Internetowe usługi informacyjne) musisz pobrać Moduł IIS CORS.

Uważaj, aby określić domenę lub listę domen zamiast *. W przeciwnym razie żądania między źródłami do serwera byłyby włączone z dowolnego miejsca.

Na Apache, w pliku konfiguracyjnym musisz dodać linię Zestaw nagłówków Access-Control-Allow-Origin „*”. Ponownie rozsądnie jest zastąpić „*” listą źródeł, z których będą wysyłane żądania.

---

2. Uruchom własny serwer proxy

1. Najpierw utworzymy plik konfiguracyjny proxy, w głównym folderze Angular, o nazwie src/proxy.conf.json, i napisz w nim następujący kod:
   • {"/api":
   • "cel":" http://localhost: 6000","bezpieczny": fałsz }
   • }
2. Po drugie, w angular.jsonplik, dodaj Konfiguracja proxyopcja w służyć cel:
   • "służyć": {
   • "budowniczy":" ",
     
   • "opcje":{„konfiguracja proxy”:"src/proxy.conf.json"}
     
   • }
3. Teraz uruchom bieżącą konfigurację za pomocą ng służyć Komenda.

Serwer proxy przekaże twoje żądania do zdalnego serwera. Następnie zobaczymy, jak skonfigurować serwer proxy.

Żądania danych w Angular to wywołania API do localhost na porcie 4200, takie jak ta lokalizacja:

• http://localhost: 4200/api/wymaganie danych.

Jednak w powyższym przykładzie założyliśmy, że żądane dane są w ta lokalizacja:

• http://localhost: 6000/API/wymaganie danych.

---

Interesują Cię dobre rozwiązania proxy? Sprawdź tę listę dedykowanych narzędzi

---

3. rewłącz Politykę Same Origin w swojej przeglądarce

Uwaga: ta konkretna metoda nie jest zalecana, ponieważ może to narazić przeglądarkę (i system) na poważne zagrożenia bezpieczeństwa.

Jeśli wszystko inne nie działa, możesz wyłączyć Zasady tego samego pochodzenia w przeglądarce. Należy jednak zachować ostrożność, ponieważ naraziłoby to przeglądarkę (i system) na poważne zagrożenia bezpieczeństwa.

Dla Google Chrome, w systemie Windows 10 otwórz wiersz polecenia jako administrator i uruchom następujące polecenie:

C: Program Files (x86)GoogleChromeApplicationchrome.exe” --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp..

Podsumowując, brak nagłówka access-control-allow-origin w żądanym zasobie komunikat o błędzie jest problemem po stronie serwera.

Dla programistów Angulara modyfikacja konfiguracji serwera lub używanie serwera proxy powinno działać dobrze.

Powiedz nam, co myślisz o tym przewodniku w sekcji komentarzy poniżej.

---

---