FIX: Nessun errore di intestazione access-control-allow-origin in Angular

Uno dei messaggi di errore più comuni che gli sviluppatori Angular possono incontrare nel loro lavoro quotidiano è: nessuna intestazione access-control-allow-origin presente sulla risorsa richiesta.

Questo non è un problema angolare specifico, ma un CORS (Problema di intestazione di condivisione delle risorse tra le origini). Potrebbe significare che il server di back-end è configurato per funzionare su una porta o un dominio diverso.

---

Come posso correggere l'errore Nessun controllo di accesso su Windows 10?

1. Apportare modifiche a livello di server

Se hai accesso al server, abilita le richieste CROS aggiungendo Accesso-Controllo-Consenti-Origine: * intestazione. Dopodiché, configura corso entrata, sotto system.webServer nel web.config file, come nell'esempio seguente.

• ”1.0″?
• abilitato="vero">
• origine=“ https://someorigin.domain.com”>
• metodo="OTTENERE"/>
• metodo="TESTA"/>
• </system.webServer>

Qui, corso permetterà OTTENERE e TESTA richieste da https://someorigin.domain.com/.

Inoltre, se stai usando IIS (servizi di informazione Internet) avresti bisogno di scaricare Modulo IIS CORS.

Fare attenzione a specificare un dominio o un elenco di domini invece di *. In caso contrario, le richieste tra le origini al server verrebbero abilitate da qualsiasi luogo.

Sopra Apache, nel file di configurazione, devi aggiungere la riga Set di intestazione Access-Control-Allow-Origin '*'. Anche in questo caso, è consigliabile sostituire "*" con un elenco di fonti da cui verrebbero effettuate le richieste.

---

2. Esegui il tuo server proxy

1. Innanzitutto, creeremo un file di configurazione del proxy, nella cartella principale di Angular, chiamato src/proxy.conf.json, e scrivici il seguente codice:
   • {"/api":
   • "bersaglio":" http://localhost: 6000","sicuro": falso }
   • }
2. In secondo luogo, nel angular.jsonfile, aggiungi il proxyConfigopzione nel servire bersaglio:
   • "servire": {
   • "costruttore":" ",
     
   • "opzioni":{"configurazione proxy":"src/proxy.conf.json"}
     
   • }
3. Ora esegui la configurazione corrente con il ng servire comando.

Un server proxy inoltrerebbe le tue richieste al server remoto. Successivamente, vedremo come configurare un server proxy.

Le richieste di dati in Angular sono chiamate API a localhost, sulla porta 4200, come questa posizione:

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

Tuttavia, nell'esempio sopra, abbiamo assunto che i dati richiesti siano a questa posizione:

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

---

Interessato a buone soluzioni proxy? Dai un'occhiata a questo elenco di strumenti dedicati

---

3. Dabilita la stessa politica di origine nel tuo browser

Nota: questo particolare metodo non è raccomandato poiché può esporre il tuo browser (e il tuo sistema) a importanti rischi per la sicurezza.

Se tutto il resto non funziona, puoi ricorrere alla disabilitazione della stessa politica di origine nel browser. Tuttavia, fai attenzione, poiché ciò esporrebbe il tuo browser (e il tuo sistema) a gravi rischi per la sicurezza.

Per Google Chrome, in Windows 10, apri il prompt dei comandi come amministratore ed esegui il comando seguente:

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

In conclusione, nessuna intestazione access-control-allow-origin presente sulla risorsa richiesta il messaggio di errore è un problema lato server.

Per gli sviluppatori Angular, la modifica della configurazione del server o l'utilizzo di un server proxy dovrebbe funzionare correttamente.

Dicci cosa ne pensi di questa guida nella sezione commenti qui sotto.

---

---