hujung hadapan web
tutorial js
Analisis mendalam prinsip JSONP merentas domain_Pengetahuan asas
Analisis mendalam prinsip JSONP merentas domain_Pengetahuan asas
JavaScript ialah teknologi skrip dinamik bahagian hadapan yang sering digunakan dalam pembangunan web. Dalam JavaScript, terdapat sekatan keselamatan yang sangat penting yang dipanggil "Dasar Asal Sama". Dasar ini meletakkan sekatan penting pada kandungan halaman yang boleh diakses oleh kod JavaScript, iaitu, JavaScript hanya boleh mengakses kandungan dalam domain yang sama dengan dokumen yang mengandunginya.
Strategi keselamatan JavaScript amat penting apabila melaksanakan pengaturcaraan berbilang iframe atau berbilang tetingkap, serta pengaturcaraan Ajax. Menurut dasar ini, kod JavaScript yang terkandung dalam halaman di bawah baidu.com tidak boleh mengakses kandungan halaman di bawah nama domain google.com malah halaman antara subdomain yang berbeza tidak boleh mengakses satu sama lain melalui kod JavaScript. Kesan pada Ajax ialah permintaan Ajax yang dilaksanakan melalui XMLHttpRequest tidak boleh menyerahkan permintaan ke domain yang berbeza Contohnya, halaman di bawah abc.example.com tidak boleh menyerahkan permintaan Ajax ke def.example.com, dsb.
Walau bagaimanapun, apabila melakukan beberapa pengaturcaraan bahagian hadapan yang mendalam, operasi merentas domain tidak dapat tidak diperlukan Pada masa ini, "dasar asal yang sama" nampaknya terlalu keras. Permintaan GET merentas domain JSONP ialah penyelesaian biasa Mari kita lihat cara merentas domain JSONP dilaksanakan dan membincangkan prinsip merentas domain JSONP.
Kaedah menyerahkan permintaan HTTP ke domain yang berbeza dengan membuat
Andaikan permintaan GET diserahkan kepada http://example2.com/getinfo.php dalam halaman http://example1.com/index.php, kita boleh Kod JavaScript berikut diletakkan dalam halaman http://example1.com/index.php untuk dilaksanakan:
var eleScript= document.createElement("skrip");
eleScript.type = "text/javascript";
eleScript.src = "http://example2.com/getinfo.php";
document.getElementsByTagName("HEAD")[0].appendChild(eleScript);
Apabila permintaan GET kembali daripada http://example2.com/getinfo.php, sekeping kod JavaScript boleh dikembalikan secara automatik dan boleh digunakan untuk memanggil http: //example1.com/index.phpFungsi panggil balik dalam halaman.
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 penyemak imbas yang lebih lama diperlukan; dan selepas permintaan selesai, hasilnya boleh dikembalikan dengan memanggil 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 masalah dua halaman dalam domain yang berbeza . Cara membuat panggilan JavaScript antara.
Contoh lain:
var qsData = {'searchWord':$("#searchWord").attr("value"),'currentUserId':
$("#currentUserId").attr("value"),'conditionBean.pageSize':$("#pageSize").attr("value")};
$.ajax({
async:false,
URL: http://cross-domain dns/document!searchJSONResult.action,
Taip: "DAPAT",
Jenis Data: 'jsonp',
jsonp: 'jsoncallback',
Data: qsData,
Tamat masa: 5000,
beforeSend: function(){
//Kaedah ini tidak dicetuskan dalam mod jsonp Sebabnya mungkin jika dataType ditentukan sebagai jsonp, ia bukan lagi acara ajax
},
Kejayaan: fungsi (json) {//Fungsi panggil balik yang dipratakrifkan oleh jquery pada bahagian klien Selepas berjaya mendapatkan data json pada pelayan merentas domain, fungsi panggil balik ini akan dilaksanakan secara dinamik
. If(json.actionErrors.length!=0){
alert(json.actionErrors); }
genDynamicContent(qsData,type,json); },
Lengkap: fungsi(XMLHttpRequest, textStatus){
$.unblockUI({ fadeOut: 10 }); },
ralat: function(xhr){
//Kaedah ini tidak dicetuskan dalam mod jsonp Sebabnya mungkin jika dataType ditentukan sebagai jsonp, ia bukan lagi acara ajax
//Minta pengendalian ralat
alert("Ralat permintaan (sila semak status rangkaian yang berkaitan.)"); }
});
Kadang-kadang anda akan melihatnya ditulis seperti ini:
Salin kod
}
});
Kaedah ini sebenarnya ialah enkapsulasi lanjutan bagi api $.ajax({..}) dalam contoh di atas Beberapa parameter asas api $.ajax dirangkumkan dan tidak kelihatan.
Salin kod
Verwenden Sie auf der Antwortseite (http://cross-domain dns/document!searchJSONResult.action) jsoncallback = request.getParameter("jsoncallback"), um den Namen der js-Funktion abzurufen, der später auf der Jquery-Seite zurückgerufen werden soll : jsonp1236827957501 und dann der Inhalt der Antwort Für ein Skript-Tags: „jsonp1236827957501(“ JSON-Array gemäß Anforderungsparametern generiert)“; erreicht den Zweck des domänenübergreifenden Datenaustauschs.
JSONP-Prinzip
Das grundlegendste Prinzip von JSONP besteht darin, dynamisch ein <script>-Tag hinzuzufügen, und das src-Attribut des script-Tags unterliegt keinen domänenübergreifenden Einschränkungen. Auf diese Weise hat diese domänenübergreifende Methode nichts mit dem Ajax-XmlHttpRequest-Protokoll zu tun. </p> <p>Auf diese Weise ist „jQuery AJAX Cross-Domain-Problem“ zu einer falschen Aussage geworden. Der Name der jquery $.ajax-Methode ist irreführend. </p> <p>Wenn diese $.ajax-Methode auf dataType: 'jsonp' festgelegt ist, hat sie nichts mit Ajax XmlHttpRequest zu tun und wird durch das JSONP-Protokoll ersetzt. JSONP ist ein inoffizielles Protokoll, das die Integration von Skript-Tags auf der Serverseite und deren Rückgabe an den Client ermöglicht und so einen domänenübergreifenden Zugriff in Form von Javascript-Rückrufen ermöglicht. </p> <p>JSONP ist JSON mit Padding. Aufgrund der Einschränkungen der Same-Origin-Richtlinie darf XmlHttpRequest nur Ressourcen von der aktuellen Quelle (Domänenname, Protokoll, Port) anfordern. Wenn wir eine domänenübergreifende Anfrage stellen möchten, können wir eine domänenübergreifende Anfrage stellen, indem wir das Skript-Tag von HTML verwenden und den auszuführenden Skriptcode in der Antwort zurückgeben, wobei das Javascript-Objekt direkt mit JSON übergeben werden kann. Diese domänenübergreifende Kommunikationsmethode heißt JSONP. </p> <p>jsonCallback-Funktion jsonp1236827957501(...): Sie wird vom Browser-Client registriert, nachdem die JSON-Daten auf dem domänenübergreifenden Server abgerufen wurden </p>Der Ausführungsprozess von Jsonp ist wie folgt: <p> </p>Registrieren Sie zunächst einen Rückruf (z. B. „jsoncallback“) auf dem Client und übergeben Sie dann den Rückrufnamen (z. B. jsonp1236827957501) an den Server. Hinweis: Nachdem der Server den Rückrufwert erhalten hat, muss er jsonp1236827957501(...) verwenden, um den auszugebenden JSON-Inhalt einzuschließen. Zu diesem Zeitpunkt können die vom Server generierten JSON-Daten korrekt vom Client empfangen werden. <p> </p>Verwenden Sie dann die Javascript-Syntax, um eine Funktion zu generieren. Der Funktionsname ist der Wert des übergebenen Parameters „jsoncallback“ jsonp1236827957501.<p> </p>Schließlich werden die JSON-Daten direkt als Parameter in die Funktion eingefügt, wodurch ein JS-Syntaxdokument generiert und an den Client zurückgegeben wird. <p> </p>Der Client-Browser analysiert das Skript-Tag und führt das zurückgegebene Javascript-Dokument aus. Zu diesem Zeitpunkt werden die Javascript-Dokumentdaten als Parameter an die vom Client vordefinierte Rückruffunktion übergeben (z. B. die jquery-Methode $.ajax()). das obige Beispiel) Gekapselter Erfolg: Funktion (json)). <p> </p>Man kann sagen, dass die JSONP-Methode im Prinzip mit <script src="http://cross-domain/...xx.js"></script> übereinstimmt (qq space verwendet diese Methode). umfangreich, um einen domänenübergreifenden Datenaustausch zu erreichen). JSONP ist ein Skript-Injection-Verhalten und birgt daher bestimmte Sicherheitsrisiken.
Warum
warum unterstützt jquery dann kein domänenübergreifendes Posten?
Obwohl die Verwendung von Post zum dynamischen Generieren von IFrames den Zweck einer domänenübergreifenden Post erreichen kann (so hat ein JS-Experte jquery1.2.5 gepatcht), ist dies eine relativ extreme Methode und wird nicht empfohlen.Man kann auch sagen, dass die domänenübergreifende Get-Methode legal ist und die Post-Methode aus Sicherheitsgründen als illegal gilt. Es ist am besten, als letzten Ausweg nicht den falschen Ansatz zu wählen.
Die Nachfrage nach domänenübergreifendem Zugriff auf der Clientseite scheint die Aufmerksamkeit von w3c geweckt zu haben. Den Informationen zufolge unterstützt der html5-WebSocket-Standard den domänenübergreifenden Datenaustausch und soll eine optionale Lösung für den domänenübergreifenden Datenaustausch sein in der Zukunft.
Nehmen wir ein supereinfaches Beispiel:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml"
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Penyelesaian kepada masalah merentas domain Sesi PHP
Oct 12, 2023 pm 03:00 PM
Penyelesaian kepada masalah silang domain PHPSession Dalam pembangunan pemisahan front-end dan back-end, permintaan merentas domain telah menjadi kebiasaan. Apabila menangani isu merentas domain, kami biasanya melibatkan penggunaan dan pengurusan sesi. Walau bagaimanapun, disebabkan oleh sekatan dasar asal penyemak imbas, sesi tidak boleh dikongsi secara lalai merentas domain. Untuk menyelesaikan masalah ini, kita perlu menggunakan beberapa teknik dan kaedah untuk mencapai perkongsian sesi merentas domain. 1. Penggunaan kuki yang paling biasa untuk berkongsi sesi merentas domain
Bagaimana untuk membuat permintaan merentas domain dalam Vue?
Jun 10, 2023 pm 10:30 PM
Vue ialah rangka kerja JavaScript yang popular untuk membina aplikasi web moden. Apabila membangunkan aplikasi menggunakan Vue, anda sering perlu berinteraksi dengan API yang berbeza, yang selalunya terletak pada pelayan yang berbeza. Disebabkan oleh sekatan dasar keselamatan merentas domain, apabila aplikasi Vue berjalan pada satu nama domain, ia tidak boleh berkomunikasi secara langsung dengan API pada nama domain lain. Artikel ini akan memperkenalkan beberapa kaedah untuk membuat permintaan merentas domain dalam Vue. 1. Gunakan proksi Penyelesaian merentas domain biasa ialah menggunakan proksi
Cara menggunakan Flask-CORS untuk mencapai perkongsian sumber merentas domain
Aug 02, 2023 pm 02:03 PM
Cara menggunakan Flask-CORS untuk mencapai perkongsian sumber merentas domain Pengenalan: Dalam pembangunan aplikasi rangkaian, perkongsian sumber merentas domain (CrossOriginResourceSharing, dirujuk sebagai CORS) ialah mekanisme yang membolehkan pelayan berkongsi sumber dengan sumber atau nama domain yang ditentukan. Menggunakan CORS, kami boleh mengawal penghantaran data secara fleksibel antara domain yang berbeza dan mencapai akses merentas domain yang selamat dan boleh dipercayai. Dalam artikel ini, kami akan memperkenalkan cara menggunakan perpustakaan sambungan Flask-CORS untuk melaksanakan fungsi CORS.
Bagaimana untuk membenarkan penggunaan merentas domain imej dan kanvas dalam HTML?
Aug 30, 2023 pm 04:25 PM
Untuk membenarkan imej dan kanvas digunakan merentas domain, pelayan mesti menyertakan pengepala CORS (Perkongsian Sumber Silang Asal) yang sesuai dalam respons HTTPnya. Pengepala ini boleh ditetapkan untuk membenarkan sumber atau kaedah tertentu, atau membenarkan mana-mana sumber mengakses sumber tersebut. HTMLCanvasAnHTML5Canvasiskawasan segi empat tepat pada halaman webyang dikawal olehJavaScriptcode.Apa-apa sahaja boleh dilukis bukan kanvas,termasuk imej,bentuk,teks,animasi.Thecanvasisagre
Cara menggunakan JSONP untuk melaksanakan permintaan merentas domain dalam Vue
Oct 15, 2023 pm 03:52 PM
Pengenalan kepada cara menggunakan JSONP untuk melaksanakan permintaan merentas domain dalam Vue Disebabkan oleh sekatan dasar asal yang sama, bahagian hadapan akan terhalang pada tahap tertentu apabila membuat permintaan merentas domain. JSONP (JSONwithPadding) ialah kaedah permintaan merentas domain Ia menggunakan ciri teg <skrip> fungsi panggil balik. Artikel ini akan memperkenalkan secara terperinci cara menggunakan JSONP dalam Vue
Masalah merentas domain yang dihadapi dalam pembangunan teknologi Vue dan penyelesaiannya
Oct 08, 2023 pm 09:36 PM
Ringkasan masalah dan penyelesaian merentas domain yang dihadapi dalam pembangunan teknologi Vue: Artikel ini akan memperkenalkan masalah dan penyelesaian merentas domain yang mungkin dihadapi semasa pembangunan teknologi Vue. Kami akan mulakan dengan perkara yang menyebabkan asal silang, kemudian merangkumi beberapa penyelesaian biasa dan memberikan contoh kod khusus. 1. Punca masalah merentas domain Dalam pembangunan web, disebabkan oleh dasar keselamatan pelayar, penyemak imbas akan menyekat permintaan daripada satu sumber (domain, protokol atau port) untuk sumber daripada sumber lain. Ini adalah apa yang dipanggil "dasar asal yang sama". Apabila kami membangunkan teknologi Vue, bahagian hadapan dan
Analisis pemprosesan log ralat domain silang Sesi PHP
Oct 12, 2023 pm 01:42 PM
Pemprosesan log ralat rentas domain PHPSession Semasa membangunkan aplikasi web, kami sering menggunakan fungsi Sesi PHP untuk menjejak status pengguna. Walau bagaimanapun, dalam beberapa kes, ralat merentas domain mungkin berlaku, mengakibatkan ketidakupayaan untuk mengakses dan mengendalikan data Sesi dengan betul. Artikel ini akan memperkenalkan cara mengendalikan ralat silang domain PHPSession dan memberikan contoh kod khusus. Apakah ralat silang domain PHPSession? Ralat merentas domain merujuk kepada ralat dalam penyemak imbas
Gunakan CORS dalam rangka kerja Beego untuk menyelesaikan masalah merentas domain
Jun 04, 2023 pm 07:40 PM
Dengan pembangunan aplikasi web dan globalisasi Internet, semakin banyak aplikasi perlu membuat permintaan merentas domain. Permintaan merentas domain ialah masalah biasa bagi pembangun bahagian hadapan, dan ia boleh menyebabkan aplikasi tidak berfungsi dengan betul. Dalam kes ini, salah satu cara terbaik untuk menyelesaikan masalah permintaan silang asal ialah menggunakan CORS. Dalam artikel ini, kami akan menumpukan pada cara menggunakan CORS dalam rangka kerja Beego untuk menyelesaikan masalah merentas domain. Apakah permintaan merentas domain? Dalam aplikasi web, permintaan merentas domain merujuk kepada permintaan daripada halaman web bagi satu nama domain kepada yang lain
