FIX: Geen header-fout in access-control-allow-origin in Angular

Een van de meest voorkomende foutmeldingen die Angular-ontwikkelaars kunnen tegenkomen in hun dagelijkse werk is: geen access-control-allow-origin header aanwezig op de gevraagde resource.

Dit is geen specifiek Angular-probleem, maar een CORS (Cross-Origin Resource Sharing) koptekstprobleem. Het kan betekenen dat de back-endserver is geconfigureerd om op een andere poort of domein te werken.

---

Hoe los ik de fout Geen toegangscontrole op Windows 10 op?

1. Wijzigingen aanbrengen op serverniveau

Als u toegang heeft tot de server, schakelt u CROS-verzoeken in door toe te voegen: Access-Control-Allow-Origin: * kop. Configureer daarna cors binnenkomst, onder systeem.webServer in web.config bestand, zoals in het onderstaande voorbeeld.

• ”1.0″?
• ingeschakeld="waar">
• oorsprong=“ https://someorigin.domain.com”>
• methode="KRIJGEN"/>
• methode="HOOFD"/>
• </system.webServer>

Hier, cors zal toestaan KRIJGEN en HOOFD verzoeken van https://someorigin.domain.com/.

Ook als u IIS (Internet Informatie Diensten) je zou moeten downloaden IIS CORS-module.

Zorg ervoor dat u een domein of een lijst met domeinen opgeeft in plaats van *. Anders zouden cross-origin-verzoeken naar de server overal worden ingeschakeld.

Aan Apache, in het configuratiebestand moet je de regel toevoegen Header set Access-Control-Allow-Origin '*'. Nogmaals, het is verstandig om de '*' te vervangen door een lijst met bronnen van waaruit de verzoeken zouden worden gedaan.

---

2. Run je eigen proxyserver

1. Eerst maken we een proxyconfiguratiebestand in de hoofdmap Angular, genaamd src/proxy.conf.json, en schrijf de volgende code erin:
   • {"/api":
   • "doelwit":" http://localhost: 6000","secure": false }
   • }
2. Ten tweede, in de angular.jsonbestand, voeg de proxyConfigoptie in de dienen doelwit:
   • "dienen": {
   • "bouwer":" ",
     
   • "opties":{"proxyconfiguratie":"src/proxy.conf.json"}
     
   • }
3. Voer nu de huidige configuratie uit met de ng serveren opdracht.

Een proxyserver stuurt uw verzoeken door naar de externe server. Vervolgens gaan we kijken hoe we een proxyserver kunnen configureren.

Verzoeken om gegevens in Angular zijn API-aanroepen naar localhost, op poort 4200, zoals deze locatie:

• http://localhost: 4200/api/datareq.

In het bovenstaande voorbeeld gingen we er echter van uit dat de gevraagde gegevens op deze locatie:

• http://localhost: 6000/api/datareq.

---

Geïnteresseerd in goede proxy-oplossingen? Bekijk deze lijst met speciale tools

---

3. Disable the Same Origin Policy in uw browser

Opmerking: deze specifieke methode wordt niet aanbevolen omdat dit uw browser (en uw systeem) kan blootstellen aan grote veiligheidsrisico's.

Als al het andere niet werkt, kunt u het Same Origin-beleid in de browser uitschakelen. Wees echter voorzichtig, aangezien dit uw browser (en uw systeem) zou blootstellen aan grote veiligheidsrisico's.

Voor Google Chrome, open in Windows 10 de opdrachtprompt als beheerder en voer de volgende opdracht uit:

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

Tot slot, geen access-control-allow-origin header aanwezig op de gevraagde resource foutmelding is een probleem aan de serverzijde.

Voor Angular-ontwikkelaars zou het aanpassen van de serverconfiguratie of het gebruik van een proxyserver prima moeten werken.

Vertel ons wat u van deze gids vindt in het commentaargedeelte hieronder.

---

---