Sintomi del problema
Nella finestra della console del browser è presente uno dei messaggi seguenti:
- Caricamento non riuscito... Nessuna intestazione 'Access-Control-Allow-Origin'
- Richiesta multiorigine bloccata: La stessa policy di origine non consente la lettura della risorsa remota... Spiegaci perché: Intestazione CORS "Access-Control-Allow-Origin" mancante
- Caricamento non riuscito... La risposta alla richiesta di verifica preliminare non supera il controllo di accesso: Nessuna intestazione "Access-Control-Allow-Origin" presente nella risorsa richiesta. Origine ... pertanto non è consentito l'accesso
Una delle parole chiave solitamente menzionate nei messaggi è Access-Control-Allow-Origin
.
Condizioni
Un'applicazione web basata su browser, forse un'app framework di app, sta tentando di effettuare una chiamata da più origini per ottenere una risorsa condivisa da un servizio web esterno. Questa operazione è nota come richiesta CORS (Cross-Origin-Resource-Sharing).
Esiste uno standard CORS basato su browser che gestisce tali chiamate trasversali. Quando alcune condizioni non sono soddisfatte, si verificano errori come quelli indicati sopra.
Soluzione
Non si tratta necessariamente di un bug, in quanto potrebbe riguardare un caso d'uso non consentito intenzionalmente dall'applicazione web e dal servizio esterno remoto dell'utente.
Quando un'origine (www.origin1.com) chiama un'altra origine (www.origin2.com), si parla di richiesta multiorigine. Affinché questa richiesta funzioni, devono esistere alcune condizioni. Il servizio esterno chiamato (www.origin2.com) deve restituire l'intestazione HTTP Access-Control-Allow-Origin
nella sua risposta.
Se il servizio esterno non restituisce questa intestazione, la richiesta viene interrotta dall'osservanza delle specifiche CORS da parte del browser e viene restituito uno degli errori indicati sopra.
Fai queste domande
- Qual è l'URL del punto di partenza della chiamata (o dell'origine)? A volte questo è nel messaggio di errore stesso.
- Come viene chiamato l'URL del servizio esterno? A volte è presente nel messaggio di errore della console.
- Che cosa viene recuperato e perché? È un file PNG? Uno script, CSS o un file di caratteri? Che cosa viene recuperato esattamente e per che cosa viene usato? Questo permette di comprendere meglio il caso d'uso e il motivo per cui l'asset di questa località remota è importante.
-
Questa risorsa esterna richiede l'autenticazione? Se è necessario un reindirizzamento, il simbolo
Access-Control-Allow-Origin
L'intestazione della risposta potrebbe non essere restituita e la chiamata avrà esito negativo. Copia l'URL della risorsa direttamente in una nuova scheda del browser. Questo può essere un buon test per verificare se sia possibile accedervi in circostanze generali, ma non garantisce che funzioni nel codice dell'app web.
- La chiamata al metodo HTTP OPTIONS è visibile nella scheda Rete del browser? Quando le intestazioni delle richieste personalizzate, l'autenticazione o altre condizioni sono presenti nella richiesta multiorigine, il browser effettua una chiamata HTTP aggiuntiva. Questa operazione viene chiamata anche chiamata preliminare. Il codice dell'app web non lo fa in modo esplicito. Il browser in background lo crea e lo rende parte dello standard della specifica CORS.
Quando viene effettuata la chiamata OPTIONS, affinché la risorsa abbia esito positivo, devono essere presenti determinati valori nella risposta alla chiamata e alla chiamata HTTP effettiva. Se la chiamata OPTIONS non riesce, la risorsa non viene recuperata e nella console del browser dovrebbe apparire l'errore CORS.
Annota se vedi una chiamata OPTIONS. Inoltre, annota se vedi una chiamata di reindirizzamento (stato 302) proprio prima della chiamata OPTIONS.
Se si verifica un reindirizzamento su una chiamata OPTIONS, molto probabilmente la chiamata OPTIONS avrà esito negativo. Ciò significa che anche la chiamata per ottenere la risorsa avrà esito negativo e genererà un errore CORS.
- Qual è il caso d'uso per il recupero di risorse esterne? Scopri perché questa risorsa esterna viene recuperata. Questo può essere importante per trovare soluzioni alternative o per apportare le modifiche necessarie.
- Genera un file HAR. Un'istantanea della chiamata non riuscita e di ciò che è accaduto immediatamente prima e dopo può aiutare a risolvere il problema ed evitare che l'utente debba riprodurla. È possibile esaminare le intestazioni nelle richieste e le risposte, nonché identificare le chiamate e i reindirizzamenti OPTIONS.
Possibili passaggi successivi
-
Chi possiede il server esterno? Forse il server può essere modificato per aderire allo standard della specifica CORS per restituire il
Access-Control-Allow-Origin
intestazione. Tuttavia, anche se il server è qualcosa di controllato internamente, non è necessariamente un toccasana. Potrebbero esserci dei validi motivi per cui un particolare servizio esterno non vuole condividere una risorsa.
Se il server esterno non è qualcosa di controllato internamente, è possibile collaborare con quel fornitore o trovare un'altra soluzione, presumendo che il caso d'uso sia considerato valido.
- L'app è stata scritta usando il framework Zendesk Apps? Un server proxy di back-end è disponibile tramite client.request() chiamare. Usa questo proxy impostando cors:false nelle impostazioni di client.request. Nota che "falso" è anche il valore predefinito dell'impostazione. Poiché il servizio proxy è un servizio di back-end, non è necessario che aderisca alle specifiche CORS basate sul browser, quindi la chiamata multiorigine potrebbe avere esito positivo usando il proxy.
Anche questo non è sempre un toccasana. Il servizio proxy non supporta il recupero di file binari o informazioni binarie da servizi esterni. Potrebbero esserci anche altri motivi specifici dell'app per cui questa non è una soluzione.
- La risorsa può essere incorporata direttamente nell'app web? Invece di usare risorse multiorigine per ottenere una risorsa, è consigliabile includerla nell'app web. In questo modo si evita completamente la chiamata multiorigine (in quanto ora è una risorsa locale) e qualsiasi problema relativo a CORS scompare. Tuttavia, questa non è sempre una soluzione. A volte gli URL delle risorse esterne non sono noti in anticipo oppure le risorse sono troppo grandi per essere usate come risorsa locale oppure le risorse vengono cambiate troppo spesso per poter essere scaricate come risorsa statica locale.
- Qual è la versione del browser? Nonostante la specifica CORS sia uno standard, i messaggi di errore restituiti dai browser possono essere diversi. Chrome restituisce messaggi sulla console diversi da Firefox.
- A volte non c'è soluzione. A volte una richiesta di risorse da un servizio esterno non deve essere condivisa nel contesto di un'app web per browser. Il proprietario della risorsa decide se condividerla o meno. Non dipende dall'app web. Potrebbe essere come previsto.
Per ulteriori informazioni, consulta queste risorse:
- Articolo da Wikipedia: Condivisione delle risorse tra origini
- Articolo di Web.Dev: Condivisione delle risorse tra origini (CORS)
- Articolo da Mozilla: Condivisione delle risorse tra origini (CORS)
- Articolo da Mozilla: OPZIONI
- Articolo da Recupera: Recupera
- Articolo da Recupera: protocollo CORS
Avvertenza sulla traduzione: questo articolo è stato tradotto usando un software di traduzione automatizzata per fornire una comprensione di base del contenuto. È stato fatto tutto il possibile per fornire una traduzione accurata, tuttavia Zendesk non garantisce l'accuratezza della traduzione.
Per qualsiasi dubbio sull'accuratezza delle informazioni contenute nell'articolo tradotto, fai riferimento alla versione inglese dell'articolo come versione ufficiale.