PricingLoginStart free
jQuery Academy · Pelajaran

AJAX Lintas Domain (CORS/JSONP)

Pahami dan terapkan teknik untuk membuat permintaan AJAX lintas domain menggunakan JSONP atau mengonfigurasi header CORS di server demi pertukaran data yang aman.

Pelajaran 3 dari 312 langkah

AJAX Lintas Domain (CORS/JSONP) adalah pelajaran jQuery Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar jQuery Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus jQuery Academy mencakup 3 pelajaran total.

AJAX Lintas Domain: Tantangannya

Saat situs web Anda mencoba mengambil data dari situs web lain, hal itu disebut permintaan AJAX lintas domain. Hal ini sering kali cukup rumit!

Secara bawaan, peramban web memiliki aturan keamanan yang mencegah halaman web membuat permintaan ke domain yang berbeda dari domain asalnya. Aturan ini melindungi data Anda.

Memahami Kebijakan Asal yang Sama

Aturan keamanan yang baru saja kita sebutkan disebut Kebijakan Asal yang Sama (SOP). Ini merupakan fitur keamanan dasar pada peramban.

SOP menetapkan bahwa peramban web mengizinkan skrip yang terdapat dalam halaman web pertama mengakses data di halaman web kedua hanya jika kedua halaman web memiliki asal yang sama (domain, protokol, dan port).

  • Contoh: Halaman dari mywebsite.com tidak dapat mengambil data dari api.anotherdomain.com secara langsung.

CORS: Solusi Modern

Untuk mengizinkan permintaan lintas domain dengan aman, komunitas web mengembangkan Cross-Origin Resource Sharing (CORS). Inilah cara modern dan standar untuk menanganinya.

CORS bekerja dengan mengizinkan server memberi tahu peramban secara eksplisit bahwa domain lain tertentu boleh mengakses sumber dayanya.

CORS: Konfigurasi di Sisi Server

CORS terutama dikonfigurasi pada server yang menyediakan data. Server mengirimkan header HTTP khusus dalam responsnya untuk menunjukkan asal mana yang diizinkan.

Header utamanya adalah Access-Control-Allow-Origin. Header ini menentukan domain mana yang dapat mengakses sumber daya tersebut.

  • Access-Control-Allow-Origin: * (mengizinkan domain apa pun)
  • Access-Control-Allow-Origin: https://yourdomain.com (hanya mengizinkan domain tertentu)

CORS: Permintaan Klien jQuery

Dari sisi klien (menggunakan jQuery), membuat permintaan CORS sering kali tidak berbeda dari permintaan AJAX biasa, asalkan server telah dikonfigurasi dengan benar.

jQuery menangani komunikasi pada tingkat peramban. Anda hanya perlu mengarahkan pemanggilan $.ajax() ke URL lintas 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: Permintaan Pendahuluan (OPTIONS)

Untuk permintaan CORS "kompleks" tertentu, peramban melakukan permintaan pendahuluan sebelum mengirimkan permintaan sebenarnya. Ini merupakan langkah keamanan tambahan.

Permintaan pendahuluan menggunakan metode HTTP OPTIONS untuk meminta izin kepada server. Jika server mengizinkannya, peramban kemudian mengirimkan permintaan sebenarnya (misalnya, PUT, DELETE, atau permintaan dengan header khusus).

JSONP: Alternatif yang Lebih Lama

Sebelum CORS diadopsi secara luas, JSONP (JSON with Padding) merupakan solusi umum untuk permintaan lintas domain, terutama pada peramban atau API yang lebih lama.

JSONP melewati Kebijakan Asal yang Sama dengan memanfaatkan secara kreatif izin peramban untuk memuat tag <script> dari domain mana pun.

JSONP: Mekanismenya

Berikut cara kerja JSONP:

  • Anda membuat tag <script> secara dinamis dan menetapkan src-nya ke URL lintas domain.
  • Server, yang mengharapkan permintaan JSONP, membungkus data JSON-nya dalam pemanggilan fungsi ("padding").
  • Peramban menjalankan skrip ini dan memanggil fungsi yang didefinisikan secara global di halaman Anda dengan data sebagai argumennya.

JSONP: Implementasi jQuery

jQuery sangat menyederhanakan implementasi JSONP. Anda hanya perlu menentukan dataType: "jsonp" dalam pemanggilan $.ajax().

jQuery secara otomatis menangani pembuatan tag <script> dinamis, pembuatan nama fungsi callback unik, dan eksekusinya saat respons tiba.

$.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 vs. JSONP: Perbedaan Utama

Meskipun keduanya menangani masalah lintas domain, CORS dan JSONP memiliki karakteristik yang berbeda:

  • CORS: Standar modern, menggunakan header HTTP, aman, mendukung semua metode HTTP, dan memerlukan konfigurasi di sisi server.
  • JSONP: Solusi lama, menggunakan tag <script>, kurang aman, hanya untuk permintaan GET, merupakan teknik di sisi klien, dan mengharuskan server membungkus respons.

Pemeriksaan Singkat: Lintas Domain

Pernyataan manakah berikut ini yang TRUE tentang permintaan AJAX lintas domain?

Jawab di pelajaran interaktif

Ringkasan: Menguasai Lintas Domain

Anda telah mempelajari cara mengatasi Kebijakan Asal yang Sama untuk permintaan AJAX lintas domain!

  • CORS adalah standar modern dan aman yang mengandalkan header HTTP di sisi server untuk memberikan izin.
  • JSONP adalah solusi lama yang kurang aman untuk permintaan GET, dengan menggunakan tag <script> dinamis.

Selalu utamakan CORS jika memungkinkan karena lebih aman dan fleksibel. JSONP terutama digunakan untuk sistem lama atau situasi tertentu.

Gratis untuk memulai

Belajar JavaScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
22
Pelajaran
48
Mulai belajar gratisLihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “AJAX Lintas Domain (CORS/JSONP)” gratis?

Ya — teks lengkap “AJAX Lintas Domain (CORS/JSONP)” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus jQuery Academy, upgrade ke CoddyKit PRO. Kursus jQuery Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “AJAX Lintas Domain (CORS/JSONP)”?

Pahami dan terapkan teknik untuk membuat permintaan AJAX lintas domain menggunakan JSONP atau mengonfigurasi header CORS di server demi pertukaran data yang aman. Kamu berlatih jQuery Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai jQuery Academy?

Tidak diperlukan pengalaman sebelumnya. jQuery Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 3.

Berapa lama pelajaran “AJAX Lintas Domain (CORS/JSONP)” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran jQuery Academy ini?

Ya. Setiap pelajaran jQuery Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Konfigurasi Permintaan AJAX secara Efektif
  2. Menangani Kesalahan dan Keberhasilan AJAX
  3. AJAX Lintas Domain (CORS/JSONP)
← Kembali ke jQuery Academy