Risoluzione dei problemi CORS

Usa questa guida per risolvere i problemi comuni nella finestra della console del browser relativi al messaggio di errore Access-Control-Allow-Origin. Di seguito sono riportati esempi di messaggi di errore. 

• Caricamento non riuscito... Nessuna intestazione "Access-Control-Allow-Origin".
  
• Richiesta multiorigine bloccata: la policy della stessa origine non consente la lettura della risorsa remota... Motivo: 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. L’accesso a Origin... non è quindi consentito

Questo articolo contiene i seguenti argomenti.

• Domande per la risoluzione dei problemi
• Possibili passaggi successivi

Cause di errore

Un’applicazione Web basata su browser, probabilmente un’app di App Framework, tenta di effettuare una chiamata multiorigine per ottenere una risorsa condivisa da un servizio Web esterno. Questo processo è noto come richiesta CORS (Cross-Origin-Resource-Sharing).

Esiste uno standard CORS basato su browser che gestisce tali chiamate multiorigine. Quando determinate condizioni non sono soddisfatte, possono verificarsi degli errori.

Non si tratta necessariamente un bug perché potrebbe essere correlato a un caso d’uso che non è consentito intenzionalmente dall’applicazione Web e dal servizio esterno remoto dell’utente.

Quando un’origine (www.origin1.com) richiama un’altra origine (www.origin2.com), si parla di richiesta tra origini. Affinché questa richiesta funzioni, devono sussistere determinate 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 conformità del browser alla specifica CORS interrompe la richiesta e viene restituito uno degli errori indicati sopra.

Domande per la risoluzione dei problemi

• Qual è l’URL del punto iniziale della chiamata (o dell’origine)?
  Talvolta è contenuto nel messaggio di errore stesso.
• Come viene chiamato l’URL del servizio esterno?
  Talvolta è contenuto nel messaggio di errore della console.
• Che cosa viene recuperato e perché? È un file PNG? Uno script, un file CSS o un file di caratteri? Che cosa viene recuperato esattamente e a cosa serve?
  Può fornire informazioni dettagliate sul caso d'uso e sul motivo per cui l'asset di questa posizione remota è importante.
• Questa risorsa esterna richiede l’autenticazione?
  Se è necessario un reindirizzamento, potrebbe non essere restituita l’intestazione Access-Control-Allow-Origin della risposta e la chiamata avrà esito negativo. Copia l’URL della risorsa direttamente in una nuova scheda anonima del browser. Può essere un buon metodo per verificare se è possibile accedervi in circostanze generali, ma non garantisce che funzionerà nel codice dell’app web.
• Riesci a vedere la chiamata al metodo HTTP OPTIONS nella scheda Rete del browser?
  Quando nella richiesta multiorigine esistono intestazioni, autenticazione o altre condizioni personalizzate di richiesta, il browser effettua un’ulteriore chiamata HTTP. È anche nota come chiamata preliminare. Il codice dell’app web non la effettua esplicitamente. Il browser in background la crea e la rende parte dello standard delle specifiche CORS.
  Quando viene effettuata questa chiamata OPTIONS, alcuni valori devono essere presenti nella risposta di questa chiamata affinché abbia esito positivo e affinché avvenga la chiamata HTTP effettiva per la risorsa. Se la chiamata OPTIONS non riesce, la risorsa non viene recuperata e nella console del browser dovrebbe apparire un errore CORS. Se vedi una chiamata OPTIONS, prendi nota. Inoltre, annota se vedi una chiamata di reindirizzamento (stato 302) che si verifica subito prima della chiamata OPTIONS. Se si verifica un reindirizzamento su una chiamata OPTIONS, è probabile che la chiamata OPTIONS abbia esito negativo. Ciò significa che anche la chiamata per ottenere la risorsa avrà esito negativo e attiverà un errore CORS.
• Qual è il caso d’uso per ottenere risorse esterne?
  In primo luogo, scopri perché questa risorsa esterna viene recuperata. Questo può essere importante per trovare soluzioni alternative o apportare le modifiche necessarie.
• Genera un file HAR.
  Ottenere 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 riprodurlo. Le intestazioni nelle richieste e nelle risposte possono essere esaminate, oltre a identificare le chiamate e i reindirizzamenti OPTIONS.

Possibili passaggi successivi

• Chi è il proprietario del server esterno? Il server potrebbe essere modificato in modo che aderisca allo standard delle specifiche CORS per restituire l’intestazione Access-Control-Allow-Origin. Tuttavia, anche se il server è controllato internamente, questo non risolve necessariamente tutti i problemi. Un particolare servizio esterno potrebbe non condividere una risorsa per diversi motivi. Se il server esterno non è controllato internamente, è possibile collaborare con il fornitore o trovare una soluzione alternativa, supponendo 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 chiamata client.request(). Usa questo proxy configurando cors:false nelle impostazioni di client.request. Tieni presente che "false" è anche il valore predefinito dell’impostazione. Poiché il servizio proxy è un servizio di back-end, non è necessario che aderisca alla specifica CORS basata su browser, quindi la chiamata multiorigine potrebbe riuscire usando il proxy.
  Anche questo non sempre risolve tutti i problemi. Il servizio proxy non supporta il recupero di file binari o informazioni binarie da servizi esterni. Potrebbero esserci altri motivi specifici dell’app per cui questa non è una soluzione.
• La risorsa può essere incorporata direttamente nell’app web? Invece di utilizzare una risorsa multiorigine per ottenere una risorsa, valuta la possibilità di includerla nell’app web. In questo modo si evita completamente la chiamata multiorigine (poiché ora è una risorsa locale) ed eventuali problemi CORS potrebbero essere risolti. Tuttavia, questa non è sempre una soluzione. A volte gli URL delle risorse esterne non sono noti in anticipo oppure la risorsa è troppo grande per essere utilizzata come risorsa locale o cambia troppo spesso per essere scaricata 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 della console diversi da quelli di Firefox. 
• A volte non esiste una soluzione. Talvolta una richiesta di risorsa da un servizio esterno non è concepita per essere condivisa nel contesto di un’app web del browser. La decisione se condividerla o meno spetta al titolare della risorsa. Non dipende dall’app web. Potrebbe comportarsi come previsto.

Per ulteriori informazioni, consulta queste risorse:

• Articolo da Wikipedia: Cross-origin resource sharing
• Articolo tratto da Web.Dev: Condivisione delle risorse tra origini (CORS)
• Articolo di Mozilla: Condivisione delle risorse tra origini (CORS)
• Articolo di Mozilla: OPTIONS
• Articolo di Fetch: Fetch
• Articolo di Fetch: CORS protocol