Sekarang mari kita bahas masalah terkait data permintaan lintas domain browser. Mungkin tidak terlalu standar untuk mengatakan bahwa ini karena menolak data permintaan lintas domain tidak unik untuk browser. Alasan mengapa domain silang tidak dapat meminta data adalah karena browser pada dasarnya menerapkan spesifikasi keamanan yang disebut "kebijakan asal-kata". Apa spesifikasi spesifiknya? Kami menemukan profil di MDN dengan alamat berikut:
Penjelasan Kebijakan Homolog Browser
Secara umum, ketika URL A dan URL B berbeda dalam hal protokol, port, dan nama domain, browser akan memulai kebijakan asal-kata yang sama dan menolak permintaan data antara server A dan B.
Saat berbicara tentang strategi yang sama-orisinal, pengetahuan yang Anda dapatkan adalah dangkal. Anda harus berlatih sendiri. Bagaimana strategi yang sama-orisinal tercermin? Di bawah ini saya akan menunjukkan langkah demi langkah dalam kombinasi dengan kode.
1. Server A tidak dapat meminta server b
Karena ini adalah domain silang, saya akan berasumsi bahwa saya memiliki dua nama domain, yaitu A dan LocalHost. A berarti bahwa editor menjadi host nama domain di Alibaba Cloud. Localhost, seperti namanya, adalah mesin pengembangan saya. Kami membayangkan sebuah skenario di mana kami menggunakan file index.html di localhost, layanan backend boot-boot sederhana di server A, dan menyediakan antarmuka sederhana untuk mengeksposnya ke panggilan file index.html. Akhirnya, browser meminta file localhost index.html, dan lihat apa yang diminta browser?
index.html
<! Doctype html> <html> <head> <title> uji akses domain silang </iteme> <meta charset = "utf-8"/> </head> <tempar> <script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.min"> "jrcrips.com/jrips.crips.com/jrips. $ (dokumen) .ready (function () {$ .Ajax ({type: "get", async: true, url: "http: //a/hello/map/getuser.json", // minta tipe antarmuka pada server a: "json", success: function (data) {// cetak data console yang dikembalikan. }); </script> <h2> halo dunia </h2> </body> </html>Minta file index.html di browser, dan ditampilkan sebagai berikut:
Dapat ditemukan bahwa permintaan itu ditolak oleh browser, mendorong kami untuk tidak mengizinkan permintaan lintas domain. Itu sangat tidak nyaman. Bagaimana cara menyelesaikannya?
2. Gunakan JSONP untuk menyelesaikan permintaan domain lintas
Pertama, mari kita bicara tentang prinsipnya. JSONP memecahkan masalah domain silang terutama menggunakan domainabilitas silang dari tag <script>, yaitu, fitur bahwa alamat tautan dalam atribut SRC dapat diakses di seluruh domain, karena kami sering menetapkan nilai atribut SRC ke alamat CDN, dan perpustakaan JS yang relevan telah dimuat.
index.html
<! Doctype html> <html> <head> <title> uji akses domain silang </iteme> <meta charset = "utf-8"/> </head> <tempar> <script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.min"> "jrcrips.com/jrips.crips.com/jrips. $ (dokumen) .ready (function () {$ .Ajax ({type: "get", async: true, jsonp: "callbackName", // name parameter antarmuka backend jsonpcallback: "callbackFunction", // name callback Url: "http: //a/hello/mapapat" data: "http: //a/hello/mapapet" data: http: //a/hello/mapet/gget. " JSONP Success: Function (Data) {Console.log ("Success"); </script> <script type = "text/javascript"> var callbackFunction = function (data) {waspada ('Data yang dikembalikan oleh antarmuka adalah:' + json.stringify (data)); }; </script> </body> </html>Kode antarmuka pada server adalah:
/** * * Kelas jsonbackController. * * Description: The controller returns a string of simple json data, and the json data is composed of a simple User object* * @author: huangjiawei * @since: June 12, 2018* @version: $Revision$ $Date$ $LastChangedBy$ * */@RestController@RequestMapping(value = "/map")public class JsonBackController { private static final Logger logger = LoggerFactory.getLogger (jsonbackController.class); / *** Menyelesaikan data permintaan lintas-domain* @param Response* @param callbackName nama fungsi callback front-end* @return*/ @RequestMapping (value = "getUser.json") public void getUser (httpservletResponse response, hteu, "httpserVleSponse, httpserponse, hteu," httpservleSponse, httpserponse, hteu, "httpserVleSponse, httpserponse, httpserponse, @requestparam callbackName) {httpserfletResponse,"; " response.setContentType ("Text/JavaScript"); Penulis penulis = null; coba {writer = response.getWriter (); writer.write (callbackName + "("); writer.write (user.toString ()); writer.write (");"); } catch (ioException e) {logger.error ("JSONP Response Write Gagal! Data:" + user.toString (), e); } akhirnya {if (writer! = null) {coba {writer.close (); } catch (ioException e) {logger.error ("Output Stream Tutup Pengecualian!", E); } penulis = null; }}}}Backend lulus dalam nama fungsi CallbackName Callback Parameter, dan kemudian mengembalikan sepotong kode JS ke frontend. Format kode JS adalah sebagai berikut:
callbackName + ( data ) + ;
Browser meminta file index.html di server localhost, dan hasilnya adalah sebagai berikut:
Metode di atas memecahkan masalah lintas domain melalui jQuery + jsonp. Bukankah Anda hanya mengatakan bahwa Anda dapat menggunakan atribut SRC dari tag <script>? Empat.
index.html di server localhost
<! Doctype html> <html> <head> <title> uji akses domain silang </itement> <meta charset = "utf-8"/> </head> <temple> <script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.min.js.prips.krips.com =" jrcrips.krips.com/JROPKERNY/JQUERY/3. = function (data) {alert ('Data yang dikembalikan oleh antarmuka adalah:' + json.stringify (data)); }; </script> <script type = "text/javaScript" src = "http: //a/hello/map/getuser.json? callbackName = callbackFunction"> </script> </body> </html>Efek tampilan browser sama seperti di atas. Tetapi harus dicatat di sini bahwa SRC berarti memperkenalkan file JS. Karena dipanggil langsung oleh antarmuka, dan data yang dikembalikan oleh antarmuka kebetulan merupakan bagian dari kode JS, itu dapat dieksekusi. Selain itu, urutan tag <script> kedua tidak dapat dibalik, jika tidak fungsi CallbackFunction tidak akan ditemukan.
Alamat Kode Proyek: https://github.com/smallercoder/jsonpdemo
Akhirnya, untuk meringkas, ada banyak solusi untuk solusi silang, JSONP hanyalah salah satunya, dan situasi spesifik perlu dianalisis secara rinci. Saya harap artikel ini akan membantu Anda. Terima kasih telah membaca. Selamat datang di GitHub untuk memulai, Momo! Saya juga berharap semua orang akan lebih mendukung wulin.com.