Analisis ringkas masalah merentas domain js dan perbandingan kelebihan dan kekurangan kemahiran solutions_javascript

Apakah itu merentas domain?

Konsep: Selagi protokol, nama domain dan port berbeza, ia dianggap sebagai domain yang berbeza.

Salin kod Kod adalah seperti berikut:

URL menunjukkan sama ada untuk membenarkan komunikasi
http://www.a.com/a.js
http://www.a.com/b.js Dibenarkan di bawah nama domain yang sama
http://www.a.com/lab/a.js
http://www.a.com/script/b.js Folder berbeza di bawah nama domain yang sama dibenarkan
http://www.a.com:8000/a.js
http://www.a.com/b.js Nama domain yang sama, port berbeza tidak dibenarkan
http://www.a.com/a.js
https://www.a.com/b.js Nama domain yang sama, protokol berbeza tidak dibenarkan
http://www.a.com/a.js
http://70.32.92.74/b.js Nama domain dan IP yang sepadan dengan nama domain tidak dibenarkan
http://www.a.com/a.js
http://script.a.com/b.js Domain utama adalah sama tetapi subdomain adalah berbeza
http://www.a.com/a.js
http://a.com/b.js Nama domain yang sama, nama domain peringkat kedua yang berbeza (sama seperti di atas) Tidak dibenarkan (kuki tidak dibenarkan untuk diakses dalam kes ini)
http://www.cnblogs.com/a.js
http://www.a.com/b.js Nama domain yang berbeza tidak dibenarkan

Perbezaan dalam port dan protokol hanya boleh diselesaikan melalui latar belakang.

Perkongsian Sumber Rentas Asal (CORS)

Perkongsian sumber merentas domain CROS (Cross-Origin Resource Sharing) mentakrifkan cara penyemak imbas dan pelayan harus berkomunikasi apabila mengakses sumber merentas domain. Idea asas di sebalik CROS ialah menggunakan pengepala HTTP tersuai untuk membolehkan penyemak imbas berkomunikasi dengan pelayan untuk menentukan sama ada permintaan atau respons harus berjaya atau gagal.

Salin kod Kod adalah seperti berikut:

Trigkit4 di atas ialah laluan relatif Jika kita mahu menggunakan CORS, kod Ajax yang berkaitan mungkin kelihatan seperti ini:

Salin kod Kod adalah seperti berikut:

Perbezaan antara kod dan yang sebelumnya ialah laluan relatif digantikan dengan laluan mutlak domain lain, iaitu alamat antara muka yang anda mahu akses merentas domain.

Sisi pelayan menyokong CORS terutamanya dengan menetapkan Access-Control-Allow-Origin. Jika penyemak imbas mengesan tetapan yang sepadan, ia boleh membenarkan akses merentas domain Ajax.

Untuk menyelesaikan masalah merentas domain, kami boleh menggunakan kaedah berikut:

Merentas domain melalui jsonp

Sekarang soalan datang? Apakah jsonp? Takrif Wikipedia ialah: JSONP (JSON dengan Padding) ialah "mod penggunaan" format data JSON, yang membenarkan halaman web meminta data daripada domain lain.

JSONP, juga dipanggil JSON empuk, ialah kaedah baharu untuk menggunakan JSON, yang hanya JSON disertakan dalam panggilan fungsi, contohnya:

Salin kod Kod adalah seperti berikut:

panggil balik({"nama","trigkit4"});

JSONP terdiri daripada dua bahagian: fungsi panggil balik dan data. Fungsi panggil balik ialah fungsi yang harus dipanggil dalam halaman apabila respons datang, dan data ialah data JSON yang dihantar ke fungsi panggil balik.

Dalam js, anda tidak boleh menggunakan XMLHttpRequest secara langsung untuk meminta data pada domain yang berbeza. Walau bagaimanapun, adalah mungkin untuk memperkenalkan fail skrip js daripada domain yang berbeza pada halaman menggunakan ciri ini untuk mencapainya. Contohnya:

Salin kod Kod adalah seperti berikut:

">http://example.com/data.php?callback=dosomething">>

Selepas fail js berjaya dimuatkan, fungsi yang kami tentukan dalam parameter url akan dilaksanakan dan data json yang kami perlukan akan dihantar sebagai parameter. Oleh itu, jsonp memerlukan kerjasama yang sepadan dari halaman sebelah pelayan.

Salin kod Kod adalah seperti berikut:

$callback = $_GET['callback'];//Dapatkan nama fungsi panggil balik
$data = array('a','b','c');//Data untuk dikembalikan
echo $callback.'('.json_encode($data).')';//Output
?>

Akhir sekali, hasil output ialah: dosomething(['a','b','c']);

Jika halaman anda menggunakan jquery, anda boleh melakukan operasi jsonp dengan mudah melalui kaedah terkapsulnya.

Salin kod Kod adalah seperti berikut:

jquery akan menjana fungsi global secara automatik untuk menggantikan tanda soal dalam panggilan balik=?, dan kemudian ia akan dimusnahkan secara automatik selepas mendapatkan data Malah, ia bertindak sebagai fungsi proksi sementara. Kaedah $.getJSON akan secara automatik menentukan sama ada ia adalah domain silang Jika ia bukan domain silang, ia akan memanggil kaedah ajax biasa, jika ia adalah domain silang, ia akan memanggil fungsi panggil balik jsonp dalam bentuk tak segerak memuatkan fail js.

Kebaikan dan Keburukan JSONP

Kelebihan JSONP ialah ia tidak dihadkan oleh dasar asal yang sama seperti permintaan Ajax yang dilaksanakan oleh objek XMLHttpRequest ia mempunyai keserasian yang lebih baik dan boleh dijalankan dalam pelayar lama tanpa sokongan XMLHttpRequest atau ActiveX ; selesai, hasilnya boleh dikembalikan dengan memanggil panggilan balik.

Kelemahan JSONP ialah: ia hanya menyokong permintaan GET tetapi bukan jenis permintaan HTTP lain seperti POST ia hanya menyokong permintaan HTTP merentas domain dan tidak dapat menyelesaikan cara membuat panggilan JavaScript antara dua halaman dalam masalah domain yang berbeza.

Perbandingan antara CROS dan JSONP

CORS sudah pasti lebih maju, mudah dan boleh dipercayai daripada JSONP.

1. JSONP hanya boleh melaksanakan permintaan GET, manakala CORS menyokong semua jenis permintaan HTTP.

2. Menggunakan CORS, pembangun boleh menggunakan XMLHttpRequest biasa untuk memulakan permintaan dan mendapatkan data, yang mempunyai pengendalian ralat yang lebih baik daripada JSONP.

3. JSONP disokong terutamanya oleh penyemak imbas lama, yang selalunya tidak menyokong CORS, dan kebanyakan penyemak imbas moden sudah menyokong CORS).
Silang subdomain dengan mengubah suai document.domain

Semua penyemak imbas mempunyai dasar asal yang sama, dan salah satu batasannya ialah dalam kaedah pertama, kami mengatakan bahawa anda tidak boleh menggunakan ajax untuk meminta dokumen daripada sumber yang berbeza. Had kedua ialah js tidak boleh berinteraksi antara bingkai dalam domain yang berbeza dalam penyemak imbas.
Objek tetingkap boleh diperolehi antara rangka kerja yang berbeza, tetapi sifat dan kaedah yang sepadan tidak boleh diperolehi. Contohnya, terdapat halaman yang beralamat http://www.example.com/a.html Terdapat iframe dalam halaman ini, dan srcnya ialah http://example .com/b.html, jelas sekali, halaman ini dan iframe di dalamnya berada dalam domain yang berbeza, jadi kami tidak boleh mendapatkan kandungan dalam iframe dengan menulis kod js dalam halaman:

Salin kod Kod adalah seperti berikut:

Pada masa ini, document.domain boleh berguna Kami hanya perlu menambah http://www.example.com/a.html dan http://example.com. / b.htmlHanya tetapkan document.domain dua halaman ini kepada nama domain yang sama. Tetapi perlu diingatkan bahawa tetapan document.domain adalah terhad Kami hanya boleh menetapkan document.domain kepada dirinya sendiri atau domain induk peringkat lebih tinggi, dan domain utama mestilah sama.

1. Tetapkan document.domain: dalam halaman http://www.example.com/a.html

Salin kod Kod adalah seperti berikut:

2. Tetapkan juga document.domain: dalam halaman http://example.com/b.html

Salin kod Kod adalah seperti berikut:

Kaedah mengubah suai document.domain hanya terpakai kepada interaksi antara bingkai dalam subdomain yang berbeza.