AJAX cross-domain (CORS/JSONP)
Comprendere e applicare le tecniche per effettuare richieste AJAX cross-domain usando JSONP o configurando gli header CORS sul server per uno scambio sicuro dei dati.
AJAX cross-domain (CORS/JSONP) è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.
AJAX cross-domain: la sfida
Quando il Suo sito web tenta di recuperare dati da un altro sito, si parla di richiesta AJAX cross-domain. Spesso non è semplice gestirla.
Per impostazione predefinita, i browser web applicano una regola di sicurezza che impedisce a una pagina web di effettuare richieste verso un dominio diverso da quello di origine. Questa regola protegge i Suoi dati.
Capire la Same-Origin Policy
La regola di sicurezza appena descritta si chiama Same-Origin Policy (SOP). È una funzione di sicurezza fondamentale dei browser.
La SOP stabilisce che un browser web consente agli script contenuti in una prima pagina web di accedere ai dati di una seconda pagina web solo se entrambe hanno la stessa origine (dominio, protocollo e porta).
- Esempio: una pagina di
mywebsite.comnon può recuperare direttamente dati daapi.anotherdomain.com.
CORS: una soluzione moderna
Per consentire in sicurezza le richieste cross-domain, la comunità web ha sviluppato il Cross-Origin Resource Sharing (CORS). È il modo moderno e standard per gestire questo tipo di richieste.
CORS funziona permettendo al server di comunicare esplicitamente al browser che determinati altri domini possono accedere alle sue risorse.
CORS: configurazione lato server
CORS viene configurato principalmente sul server che fornisce i dati. Il server invia nella risposta speciali intestazioni HTTP per indicare quali origini sono autorizzate.
L'intestazione principale è Access-Control-Allow-Origin. Specifica quali domini possono accedere alla risorsa.
Access-Control-Allow-Origin: *(consente qualsiasi dominio)Access-Control-Allow-Origin: https://yourdomain.com(consente solo un dominio specifico)
CORS: richieste client jQuery
Dal lato client (utilizzando jQuery), effettuare una richiesta CORS spesso non è diverso dall'effettuare una normale richiesta AJAX, a condizione che il server sia configurato correttamente.
jQuery gestisce la comunicazione a livello di browser. È sufficiente indirizzare la chiamata $.ajax() verso l'URL cross-domain.
$.ajax({
url: "https://api.example.com/data", // Server must allow CORS
method: "GET",
success: function(data) {
console.log("CORS success:", data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.error("CORS Error:", textStatus, errorThrown);
}
});CORS: richieste di preflight (OPTIONS)
Per alcune richieste CORS "complesse", i browser eseguono una richiesta di preflight prima di inviare la richiesta effettiva. Si tratta di un ulteriore passaggio di sicurezza.
Una richiesta di preflight utilizza il metodo HTTP OPTIONS per chiedere l'autorizzazione al server. Se il server la concede, il browser invia quindi la richiesta effettiva (ad esempio PUT, DELETE o richieste con intestazioni personalizzate).
JSONP: un'alternativa meno recente
Prima che CORS fosse adottato ampiamente, JSONP (JSON with Padding) era una soluzione comune per le richieste cross-domain, soprattutto con i browser o le API meno recenti.
JSONP aggira la Same-Origin Policy sfruttando in modo creativo il fatto che il browser consente di caricare tag <script> da qualsiasi dominio.
JSONP: il meccanismo
Ecco come funziona JSONP:
- Si crea dinamicamente un tag
<script>e si imposta il suosrcsull'URL cross-domain. - Il server, aspettandosi una richiesta JSONP, racchiude i dati JSON in una chiamata di funzione (il "padding").
- Il browser esegue questo script, chiamando una funzione definita globalmente nella pagina e passandole i dati come argomento.
JSONP: implementazione con jQuery
jQuery semplifica notevolmente l'implementazione di JSONP. È sufficiente specificare dataType: "jsonp" nella chiamata $.ajax().
jQuery gestisce automaticamente la creazione del tag <script> dinamico, la generazione di un nome univoco per la callback e la sua esecuzione all'arrivo della risposta.
$.ajax({
url: "https://api.example.com/jsonp-data?callback=?", // Server must support JSONP
dataType: "jsonp",
success: function(data) {
console.log("JSONP success:", data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.error("JSONP Error:", textStatus, errorThrown);
}
});CORS e JSONP: differenze principali
Sebbene entrambi risolvano i problemi cross-domain, CORS e JSONP presentano caratteristiche diverse:
- CORS: standard moderno, utilizza intestazioni HTTP, è sicuro, supporta tutti i metodi HTTP e richiede una configurazione lato server.
- JSONP: soluzione meno recente, utilizza tag
<script>, è meno sicura, supporta solo richieste GET, è una tecnica lato client e richiede che il server racchiuda la risposta in una funzione.
Verifica rapida: cross-domain
Quali delle seguenti affermazioni sulle richieste AJAX cross-domain sono VERE?
Riepilogo: padronanza del cross-domain
Ha imparato a superare la Same-Origin Policy nelle richieste AJAX cross-domain.
- CORS è lo standard moderno e sicuro, basato sulle intestazioni HTTP lato server per concedere l'autorizzazione.
- JSONP è una soluzione meno recente e meno sicura per le richieste GET, che utilizza tag
<script>dinamici.
Preferisca sempre CORS quando possibile, perché è più sicuro e flessibile. JSONP è destinato soprattutto ai sistemi legacy o a scenari specifici.
Domande Frequenti
La lezione «AJAX cross-domain (CORS/JSONP)» è gratuita?
Sì — il testo completo di «AJAX cross-domain (CORS/JSONP)» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.
Cosa imparerò in «AJAX cross-domain (CORS/JSONP)»?
Comprendere e applicare le tecniche per effettuare richieste AJAX cross-domain usando JSONP o configurando gli header CORS sul server per uno scambio sicuro dei dati. Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare jQuery Academy?
Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 3.
Quanto tempo richiede la lezione «AJAX cross-domain (CORS/JSONP)»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione jQuery Academy?
Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Configurazione efficace delle richieste AJAX
- Gestione degli errori e dei risultati AJAX
- AJAX cross-domain (CORS/JSONP)