Saya sudah lama tidak menulis esai, dan saya selalu merasa tidak punya waktu, tetapi pada kenyataannya, waktu... Cukup omong kosong, beberapa hari yang lalu, ada persyaratan baru di tempat kerja, yang mengharuskan halaman web front-end untuk memanggil metode layanan Web backend secara asinkron untuk mengembalikan informasi. Ada banyak cara untuk menerapkannya, contoh ini menggunakan jQuery+Ajax, setelah selesai, semuanya baik-baik saja untuk men-debug secara lokal, tetapi ada masalah setelah diterapkan ke server, dan panggilan layanan latar belakang tidak responsif, apa yang terjadi? Kodenya tidak banyak berubah, satu-satunya hal yang berubah adalah alamat URL dalam metode ajax jQuery. Mungkinkah masalahnya di sini adalah setelah pengecekan dan debugging, ternyata kebijakan homolog yang salah, kita tahu bahwa Javascrip{filtering}t atau jQuery adalah teknik scripting dinamis yang sering digunakan dalam pengembangan front-end web. Di Javascrip{filtering}t, ada batasan keamanan penting yang dikenal sebagai "Kebijakan Asal yang Sama". Kebijakan ini memberlakukan pembatasan penting pada konten halaman yang dapat diakses oleh kode Javascrip{filter}t, yaitu, Javascrip{filtering}t hanya dapat mengakses konten dengan nama domain yang sama dengan dokumen atau skrip yang berisinya. Skrip di bawah domain yang berbeda tidak dapat mengakses satu sama lain, bahkan subdomain. Mengenai strategi homolog, pembaca dapat menjelaskannya secara lebih rinci di Baidu, yang tidak akan diulang di sini.
Tetapi terkadang tidak dapat dihindari untuk melakukan operasi lintas domain, dan "kebijakan homolog" adalah batasan, apa yang harus kita lakukan? Mari kita lihat bagaimana JSONP lintas domain diterapkan dan membahas prinsip JSONP lintas domain.
JSONP disebutkan di sini, lalu ada yang bertanya, apa perbedaan dan perbedaan antara JSON, mari kita lihat, Baidu Encyclopedia memiliki penjelasan sebagai berikut:
JSON (Javascrip{filtering}t Object Notation) adalah format pertukaran data yang ringan. Ini didasarkan pada subset dari Javascrip{filter}t (Standar ECMA-262 Edisi ke-3 - Desember 1999). JSON menggunakan format teks yang sepenuhnya independen bahasa, tetapi juga menggunakan kebiasaan yang mirip dengan keluarga C (termasuk C, C++, C#, Java, Javascrip, Perl, Python, dll.). Fitur-fitur ini menjadikan JSON bahasa yang ideal untuk pertukaran data. Mudah dibaca dan ditulis oleh manusia, tetapi juga mudah diuraikan dan dihasilkan oleh mesin (transmisi jaringan cepat).
JSONP (JSON with padding) adalah "pola penggunaan" JSON, yang dapat digunakan untuk memecahkan masalah akses data lintas domain di browser arus utama. Karena kebijakan asal yang sama, halaman yang umumnya terletak di server1.example.com tidak dapat berkomunikasi dengan server yang tidak server1.example.com, dengan pengecualian elemen HTML <scrip{filter}t>. Dengan menggunakan strategi terbuka elemen <scrip{filter}t> ini, halaman web dapat memperoleh data JSON yang dihasilkan secara dinamis dari sumber lain, dan pola penggunaan ini dikenal sebagai JSONP. Data yang diambil dengan JSONP bukanlah JSON, tetapi Javascrip{filter}t arbitrer, yang dijalankan dengan penerjemah Javascrip{filter}t alih-alih diurai oleh pengurai JSON.
Pada titik ini, harus dipahami bahwa JSON adalah format pertukaran data yang ringan, seperti xml, yang digunakan untuk menggambarkan data antar data. JSONP adalah cara untuk menggunakan data JSON, dan alih-alih mengembalikan objek JSON, itu adalah skrip javascrip{filtering}t yang berisi objek JSON.
Jadi bagaimana cara kerja JSONP, kita tahu bahwa karena keterbatasan kebijakan asal yang sama, XmlHttpRequest hanya mengizinkan permintaan sumber daya dari sumber saat ini (nama domain, protokol, port). Permintaan lintas domain tidak dimungkinkan karena alasan keamanan, tetapi kami menemukan bahwa ketika file js dipanggil di halaman web, file tersebut tidak terpengaruh oleh lintas domain atau tidak, dan tag dengan atribut "src" memiliki kemampuan lintas domain, seperti <scrip{filter}t>, <img>, ,<iframe>Jika Anda ingin membuat permintaan lintas domain, buat permintaan lintas domain dengan menggunakan tag scrip{filter}t html, dan kembalikan kode scrip{filtering}t yang akan dieksekusi dalam respons, di mana Anda dapat langsung menggunakan JSON untuk meneruskan objek javascrip{filter}t. Artinya, menghasilkan data JSON di server lintas domain dan kemudian membungkusnya ke dalam skrip scrip{filtering}t kembali, yang menembus batasan kebijakan asal yang sama dan memecahkan masalah akses lintas domain.
Mari kita lihat cara mencapainya:
Kode front-end:
|