Una richiesta di condivisione di risorse multiorigine (CORS) si verifica quando un’applicazione basata su browser effettua una chiamata multiorigine. Ad esempio, un’app Zendesk App Framework (ZAF) effettua questa chiamata per recuperare una risorsa condivisa da un servizio web esterno.
Una richiesta CORS richiede determinate condizioni per funzionare. Una condizione è che il servizio esterno debba restituire l’intestazione HTTPAccess-Control-Allow-Origin nella risposta. Se il servizio esterno non restituisce questa intestazione, il sistema interrompe la richiesta e visualizza un messaggio di errore.
Usa questa guida per risolvere i problemi comuni relativi aAccess-Control-Allow-Origin messaggio di errore. 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.
Risolvi le domande
Prima di risolvere l’errore, prendi nota delle domande seguenti e identifica i parametri specifici che possono aiutarti a risolvere il problema:
- Qual è l’URL di origine della chiamata? Qual è l’URL del servizio esterno? A volte il messaggio di errore descrive in dettaglio questi URL.
- Cosa recuperi e a cosa serve? Recuperi un file PNG, di script, CSS o un file di caratteri? Questo ti aiuta a comprendere il caso d’uso e l’importanza della risorsa esterna.
- Quale browser e versione usi? Nonostante lo standard delle specifiche CORS , browser diversi restituiscono messaggi di errore diversi.
- Questa risorsa esterna richiede l’autenticazione? Se si verifica un reindirizzamento, il server potrebbe non restituire
Access-Control-Allow-Originintestazione e la chiamata non riesce. Accedi all’URL della risorsa in modalità di navigazione in incognito o da una finestra privata del browser per verificare se puoi accedervi in circostanze generali. - Riesci a vedere il
OPTIONSMetodo HTTP nelle impostazioni di rete del browser? Per le richieste personalizzate, il browser effettua una chiamata HTTP preliminare nella richiesta CORS. Questa chiamata preliminare richiede valori specifici. Se ilOPTIONSchiamata non riesce, viene visualizzato l’errore CORS. - Vedi il codice di stato HTTP 302 prima di
OPTIONSchiamare? Questo codice indica un reindirizzamento temporaneo, che può causare ilOPTIONSchiamata non riuscita e genera un errore CORS. - Genera un file di archivio HTTP (HAR) . Ottieni un’istantanea della chiamata non riuscita per comprendere ed eseguire il debug del problema.
Passaggi per la risoluzione
Usa queste soluzioni e soluzioni alternative per risolvere il messaggio di errore:
- Se sei il proprietario del server esterno, modificalo in modo che restituisca
Access-Control-Allow-Originintestazione. Se non controlli il server esterno, coordinati con il proprietario del server. - Se crei l’app con il Zendesk App Framework , puoi usare un server proxy di backend tramite
client.request()chiamata. Usa il valore predefinitocors:falsenella configurazione per inviare richieste al server proxy. Poiché il servizio proxy si trova nel backend, non è necessario che aderisca allo standard delle specifiche CORS. Tuttavia, questa non è sempre una soluzione. Una limitazione è che il servizio proxy non assistenza il recupero di informazioni binarie da servizi esterni.
A volte, non è possibile risolvere il problema. Alcune risorse esterne non assistenza l’accesso condiviso da un’app web basata su browser.
Alternative a CORS
Per evitare errori correlati a CORS in futuro, implementa queste alternative:
- Se usi un’app Zendesk App Framework , usa il server proxy. Invece di diretto
fetch()o chiamate asincrone JavaScript e XML (AJAX), usaclient.request()chiamata. Questa chiamata inoltra le richieste tramite Zendesk. - Usa l’ SDK Web Widget per incorporare chat, messaggistica, gestione dei ticket, Voce (precedentemente Talk) e centro assistenza nella tua app web. L’SDK gestisce automaticamente l’autenticazione e CORS.
- Effettua invece chiamate API (Application Programming Interface) dal server di backend. Una richiesta CORS può non riuscire quando chiami l’API Zendesk direttamente da un browser. Le richieste da server a server non hanno limitazioni CORS, a differenza delle richieste basate su browser.
- Invece di una richiesta CORS, incorpora la risorsa esterna per evitare chiamate multiorigine. Questa soluzione potrebbe non funzionare se non disponi dell’URL della risorsa esterna. Non riesce anche se la risorsa è troppo grande per essere memorizzata in locale o se i dati cambiano troppo spesso. Infine, non puoi usare questa soluzione se non puoi incorporare la risorsa esterna.
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.