AJAX på tvers av domener (CORS/JSONP)
Forstå og bruk teknikker for AJAX-forespørsler på tvers av domener ved hjelp av JSONP eller konfigurering av CORS-headere på serveren for sikker datautveksling.
AJAX på tvers av domener (CORS/JSONP) er en gratis leksjon i jQuery Academy på CoddyKit. Dette er leksjon 3 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i jQuery Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i jQuery Academy inneholder totalt 3 leksjoner.
AJAX på tvers av domener: Utfordringen
Når nettstedet Deres prøver å hente data fra et annet nettsted, kalles det en AJAX-forespørsel på tvers av domener. Dette kan ofte være utfordrende!
Som standard har nettlesere en sikkerhetsregel som hindrer en nettside i å sende forespørsler til et annet domene enn det siden stammer fra. Denne regelen beskytter dataene Deres.
Forstå Same-Origin Policy
Sikkerhetsregelen vi nettopp nevnte, kalles Same-Origin Policy (SOP). Den er en grunnleggende sikkerhetsfunksjon i nettlesere.
SOP bestemmer at en nettleser bare tillater skript i en første nettside å få tilgang til data i en annen nettside hvis begge nettsidene har samme opprinnelse (domene, protokoll og port).
- Eksempel: En side fra
mywebsite.comkan ikke hente data direkte fraapi.anotherdomain.com.
CORS: En moderne løsning
For å tillate forespørsler på tvers av domener på en trygg måte utviklet webfellesskapet Cross-Origin Resource Sharing (CORS). Dette er den moderne standardmåten å håndtere dette på.
CORS fungerer ved at serveren uttrykkelig forteller nettleseren at bestemte andre domener kan få tilgang til ressursene.
CORS: Konfigurasjon på serversiden
CORS konfigureres først og fremst på serveren som leverer dataene. Serveren sender spesielle HTTP-hoder i svaret for å angi hvilke opprinnelser som er tillatt.
Det viktigste hodet er Access-Control-Allow-Origin. Det angir hvilke domener som kan få tilgang til ressursen.
Access-Control-Allow-Origin: *(tillater alle domener)Access-Control-Allow-Origin: https://yourdomain.com(tillater bare et bestemt domene)
CORS: Klientforespørsler med jQuery
På klientsiden (med jQuery) er det ofte ikke annerledes å sende en CORS-forespørsel enn en vanlig AJAX-forespørsel, forutsatt at serveren er riktig konfigurert.
jQuery håndterer kommunikasjonen på nettlesernivå. De trenger bare å angi URL-en på tvers av domener i kallet $.ajax().
$.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: Forhåndskontrollerte forespørsler (OPTIONS)
For enkelte «komplekse» CORS-forespørsler sender nettlesere en forhåndskontrollert forespørsel før den faktiske forespørselen sendes. Dette er et ekstra sikkerhetstiltak.
En forhåndskontrollert forespørsel bruker HTTP-metoden OPTIONS for å be serveren om tillatelse. Hvis serveren gir tillatelse, sender nettleseren deretter den faktiske forespørselen (for eksempel PUT, DELETE eller forespørsler med egendefinerte hoder).
JSONP: Et eldre alternativ
Før CORS ble tatt i bruk i stor utstrekning, var JSONP (JSON with Padding) en vanlig løsning for forespørsler på tvers av domener, særlig for eldre nettlesere eller API-er.
JSONP omgår Same-Origin Policy ved å utnytte nettleserens tillatelse til å laste inn <script>-tagger fra alle domener.
JSONP: Slik fungerer det
Slik fungerer JSONP:
- De oppretter dynamisk en
<script>-tagg og angir URL-en på tvers av domener isrc. - Serveren, som forventer en JSONP-forespørsel, pakker JSON-dataene inn i et funksjonskall (den såkalte «padding»-en).
- Nettleseren kjører dette skriptet og kaller en globalt definert funksjon på siden Deres med dataene som argument.
JSONP: Implementering med jQuery
jQuery gjør implementering av JSONP betydelig enklere. De trenger bare å angi dataType: "jsonp" i kallet på $.ajax().
jQuery håndterer automatisk oppretting av den dynamiske <script>-taggen, generering av et unikt navn på tilbakekallfunksjonen og kjøring av den når svaret kommer.
$.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 kontra JSONP: Viktige forskjeller
Selv om begge løser problemer på tvers av domener, har CORS og JSONP ulike egenskaper:
- CORS: Moderne standard, bruker HTTP-hoder, er sikkert, støtter alle HTTP-metoder og krever konfigurasjon på serversiden.
- JSONP: Eldre løsning, bruker
<script>-tagger, er mindre sikker, støtter bare GET-forespørsler, er en teknikk på klientsiden og krever at serveren pakker inn svaret.
Kjapp sjekk: På tvers av domener
Hvilke av følgende påstander om AJAX-forespørsler på tvers av domener er SANNE?
Oppsummering: På tvers av domener
De har lært hvordan De kan omgå Same-Origin Policy for AJAX-forespørsler på tvers av domener!
- CORS er den moderne og sikre standarden, som bygger på HTTP-hoder på serversiden for å gi tillatelse.
- JSONP er en eldre og mindre sikker løsning for GET-forespørsler, som bruker dynamiske
<script>-tagger.
Foretrekk alltid CORS når det er mulig, siden det er sikrere og mer fleksibelt. JSONP brukes hovedsakelig for eldre systemer eller i bestemte situasjoner.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 22
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «AJAX på tvers av domener (CORS/JSONP)» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien jQuery Academy, inkludert «AJAX på tvers av domener (CORS/JSONP)», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i jQuery Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «AJAX på tvers av domener (CORS/JSONP)»?
Forstå og bruk teknikker for AJAX-forespørsler på tvers av domener ved hjelp av JSONP eller konfigurering av CORS-headere på serveren for sikker datautveksling. Du øver på jQuery Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med jQuery Academy?
Ingen tidligere erfaring er nødvendig. jQuery Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 3.
Hvor lang tid tar leksjonen «AJAX på tvers av domener (CORS/JSONP)»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne jQuery Academy-leksjonen?
Ja. Alle jQuery Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Effektiv konfigurering av AJAX-forespørsler
- Håndtering av AJAX-feil og suksess
- AJAX på tvers av domener (CORS/JSONP)