Berbagai tutorial lintas domain, berbagai praktik, dan berbagai tanya jawab online. Selain JSONP sederhana, banyak orang mengatakan CORS tidak berfungsi, dan mereka selalu kekurangan satu atau dua konfigurasi utama. Artikel ini hanya ingin menyelesaikan masalah, dan semua kode telah dipraktikkan sendiri.
Artikel ini memecahkan masalah seperti Get, Post, Data, dan Cookie di Cross-Domain.
Artikel ini hanya akan berbicara tentang permintaan mendapatkan dan memposting permintaan. Pembaca harus memahami permintaan posting karena semua metode permintaan lainnya kecuali mendapatkan permintaan.
Jsonp
JSONP menggunakan prinsip bahwa browser tidak memiliki batasan homologis pada referensi sumber daya skrip, dan secara dinamis menyisipkan tag skrip, dan akan dieksekusi segera setelah sumber daya dimuat pada halaman. JSONP adalah protokol transmisi informal. Salah satu poin utama dari protokol ini adalah untuk memungkinkan pengguna lulus panggilan balik atau menentukan metode panggilan balik di awal, dan parameter diberikan ke server. Ketika server mengembalikan data, parameter callback akan digunakan sebagai nama fungsi untuk membungkus data JSON, sehingga klien dapat menyesuaikan fungsinya sendiri untuk secara otomatis memproses data pengembalian.
JSONP hanya mendukung mendapatkan permintaan tetapi bukan jenis permintaan HTTP lainnya seperti POST. Ini hanya mendukung permintaan HTTP lintas domain. Itu tidak dapat menyelesaikan masalah bagaimana membuat panggilan JavaScript antara dua halaman di domain yang berbeda. Keuntungan dari JSONP adalah mendukung browser kuno, dan kerugiannya juga jelas: itu membutuhkan penyesuaian klien dan server untuk pengembangan. Data yang dikembalikan oleh server tidak dapat menjadi data JSON standar, tetapi data yang dibungkus dengan panggilan balik.
Prinsip JSONP sangat sederhana, dan menggunakan gagasan [tidak ada masalah lintas domain ketika front-end meminta sumber daya statis].
Tapi itu hanya mendukung Get, hanya dukungan, hanya dukungan.
Perhatikan bahwa karena metode ini disebut JSONP, data backend harus menggunakan data JSON. Anda tidak dapat membuat tali atau sesuatu dengan santai, jika tidak, Anda akan menemukan hasilnya tidak dapat dijelaskan.
Metode Penulisan JQuery Front-End
$ .AJAX ({type: "get", url: baseUrl + "/jsonp/get", dataType: "jsonp", Success: function (response) {$ ("#response"). val (json.stringify (respons));}});DataType: "JSONP". Kecuali untuk ini, konfigurasi lain sama dengan permintaan normal.
Konfigurasi SpringMVC backend
Jika Anda juga menggunakan SpringMVC, maka konfigurasikan saran JSONP, sehingga setiap metode pengontrol yang kami tulis tidak perlu mempertimbangkan apakah klien meminta JSONP, dan Spring akan secara otomatis menanganinya sesuai.
@ControllerAdvicePublic Class JSONPAdvice memperluas AbstractJSonPresponsododyAdvice {public jsonPadvice () {// Dengan cara ini, jika permintaan berisi parameter callback, Spring akan tahu bahwa ini adalah permintaan JSONP super ("callback"); }}Metode penulisan di atas mensyaratkan bahwa versi SpringMVC tidak lebih rendah dari 3.2, dan saya hanya bisa mengatakan bahwa Anda harus meningkatkan.
Konfigurasi Backend Non-SpringMVC
Ketika saya mulai bekerja, Struts2 masih populer. Setelah beberapa tahun, SpringMVC pada dasarnya mendominasi pasar domestik.
Jadilah malas, berikut adalah kode pseudo, dan klik metode bungkus sebelum metode kami kembali ke ujung depan:
@ControllerAdvicePublic Class JSONPAdvice memperluas AbstractJSonPresponsododyAdvice {public jsonPadvice () {// Dengan cara ini, jika permintaan berisi parameter callback, Spring akan tahu bahwa ini adalah permintaan JSONP super ("callback"); }}CORS
Berbagi Sumber Daya Cross-Origin
CORS adalah cara agar browser modern mendukung permintaan sumber daya lintas domain. Nama lengkapnya adalah "Cross-OriginResourcesharing". Saat mengirim permintaan menggunakan XMLHTTPREQUEST, browser menemukan bahwa permintaan tidak mematuhi kebijakan asal-kata yang sama, dan akan menambahkan header permintaan ke permintaan: asal. Latar belakang melakukan serangkaian pemrosesan. Jika ditentukan untuk menerima permintaan, header respons ditambahkan ke hasil pengembalian: akses-kontrol-awal-asal; Browser menentukan apakah header yang sesuai berisi nilai asal. Jika ada, browser akan memproses respons, dan kita bisa mendapatkan data respons. Jika browser tidak termasuk browser, kami tidak bisa mendapatkan data respons.
CORS dan JSONP menggunakan tujuan yang sama, tetapi lebih kuat dari JSONP. CORS mendukung semua jenis permintaan browser, dan jumlah data yang diminta lebih besar dan lebih terbuka dan ringkas. Server hanya perlu mengembalikan data yang diproses secara langsung, dan tidak perlu untuk pemrosesan khusus.
Lagi pula, JSONP hanya mendukung permintaan mendapatkan, yang pasti tidak dapat memenuhi semua kebutuhan permintaan kami, jadi CORS perlu dipindahkan.
Pengembang web domestik masih cukup sulit. Pengguna tidak meningkatkan browser mereka, dan bos masih ingin pengembang kompatibel.
CORS mendukung browser berikut. Saat ini, masalah browser menjadi kurang dan kurang penting, dan bahkan Taobao tidak mendukung IE7 ~~~
Chrome 3+
Firefox 3.5+
Opera 12+
Safari 4+
Internet Explorer 8+
Metode Penulisan JQuery Front-End
Lihat saja kodenya:
$ .AJAX ({type: "POST", URL: BASEURL + "/JSONP/POST", DataType: 'JSON', CrossDomain: True, XHRFields: {WithCredentials: True}, Data: {name: "name_from_frontend"}, Success: function (response) {console.log. $ ("#respons"). Val (json.stringify (respons));DataType: "JSON", di sini adalah JSON, bukan JSONP, bukan JSONP, bukan JSONP.
CrossDomain: Benar, di sini berarti menggunakan permintaan lintas domain
xhrfields: {withcredentials: true}, sehingga konfigurasi dapat membawa cookie, jika tidak kita bahkan tidak dapat mempertahankan sesi, dan banyak orang terjebak di sini. Tentu saja, jika Anda tidak memiliki persyaratan ini, Anda tidak perlu mengonfigurasi ini.
Konfigurasi SpringMVC backend
Untuk sebagian besar proyek Web, biasanya ada kelas konfigurasi terkait MVC, yang diwarisi dari WebMVCConfigurerAdapter. Jika Anda juga menggunakan SpringMVC 4.2 atau di atas, cukup tambahkan metode ini seperti yang berikut:
@ConfigurationPublic kelas webconfig memperluas webmvcconfigurerAdapter {@Override public void addCorSmappings (CorsRegistry Registry) {Registry.addmapping ("/**/*"). Diizinkan AREORIGINS ("*"); }}Jika Anda sayangnya dalam proyek Anda, versi SpringMVC lebih rendah dari 4.2, maka Anda perlu "menyelamatkan negara melalui kurva":
CrossDomainFilter kelas publik meluas sekalipun {@override void dofilterinternal (permintaan httpservletRequest, httpservletResponse response, filterchain filterChain) tidak ada servletException, ioException {response.addheader ("Access-Conceptol-conception, ioException {response.addheader (" Access-Conceptol-Conception, IoException {response.addeheader ("Access-Conceptol-Conception, IoException {response.addheader (" Access-CONTROL-CONTOLIG-"" Silakan lihat ke bawah pada respons. response.addheader ("Access-Control-Allow-Methods", "Get, Post, Put, Delete"); response.addheader ("Access-Control-Wallow-Headers", "Content-Type"); filterchain.dofilter (permintaan, respons); }}Konfigurasikan filter di web.xml:
<nilter> <nilter-name> CrossDomAinFilter </tilter-name> <nilter-class> com.javadoop.filters.crossdomainfilter </filter-class> </tilter> <nilter-Mapping> <nilter-name> CrossDomainFilter </filter-name> <ruRl-pola>/</url-pola> </filter-potping>
Ada banyak proyek yang menggunakan Shiro, dan Anda juga dapat mengkonfigurasi filter Shiro, jadi saya tidak akan memperkenalkannya di sini.
Perhatikan bahwa saya berbicara tentang konfigurasi yang sangat umum, yang dapat dikonfigurasi dalam konfigurasi umum untuk sebagian besar proyek. Pembaca harus tahu cara mencocokkan konfigurasi seperti "*" dalam artikel.
Jika pembaca menemukan bahwa browser meminta bahwa simbol '*' tidak dapat digunakan, maka pembaca dapat memperoleh referer (request.getHeader ("referer") di header permintaan sesuai dengan objek permintaan di filter di atas, dan kemudian secara dinamis menetapkan "akses-kontrol-melihat-origin":::
String Referer = Request.GetHeader ("Referer"); if (stringutils.isnotblank (referer)) {url url = URL baru (referer); String asal = url.getProtocol () + ": //" + url.getHost (); response.addheader ("Access-Control-Allow-Origin", Origin);} else {response.addheader ("Access-Control-Allow-Origin", "*");}Penulisan non-juer front-end
Hari -hari ketika Anda makan jQuery dengan satu trik benar -benar hilang. Di sini saya akan berbicara tentang cara menyelesaikan masalah post-domain post jika Anda tidak menggunakan jQuery.
Mari kita perkenalkan JS asli:
function createCorsRequest (Metode, url) {var xhr = new XmlHttpRequest (); if ("withcredentials" di xhr) {// Jika ada atribut dengan credentials, itu jelas merupakan objek XMLHTTPREQUESTED2. Lihatlah parameter ketiga xhr.open (metode, url, true); } lain jika (typeof xdomainRequest! = "tidak terdefinisi") {// Objek ini digunakan oleh IE untuk meminta seluruh domain xhr = new xdomainRequest (); xhr.open (metode, url); } else {// Jika demikian, sayangnya, browser tidak mendukung CORS xhr = null; } return xhr;} var xhr = createCorsRequest ('get', url); if (! xhr) {lempar kesalahan baru ('cors tidak didukung');}Di antara mereka, Chrome, Firefox, Opera, dan Safari, browser "ramah program" ini menggunakan objek XMLHTTPREQUEST2. IE menggunakan xdomainRequest.
Meringkaskan
Di atas adalah tentang menyelesaikan masalah permintaan lintas domain dengan cepat: JSONP dan CORS. Saya harap ini akan membantu semua orang. Teman yang tertarik dapat terus merujuk ke topik terkait lainnya di situs ini. Jika ada kekurangan, silakan tinggalkan pesan untuk menunjukkannya!