ตอนนี้เรามาพูดคุยเกี่ยวกับปัญหาที่เกี่ยวข้องของข้อมูลการร้องขอข้ามโดเมนเบราว์เซอร์ อาจไม่ได้มาตรฐานมากที่จะบอกว่านี่เป็นเพราะการปฏิเสธข้อมูลคำขอข้ามโดเมนไม่ได้เป็นเอกลักษณ์ของเบราว์เซอร์ เหตุผลที่ cross-domain ไม่สามารถร้องขอข้อมูลได้เนื่องจากเบราว์เซอร์ใช้ข้อกำหนดความปลอดภัยที่เรียกว่า "นโยบายต้นฉบับเดียวกัน" ข้อกำหนดเฉพาะคืออะไร? เราพบโปรไฟล์บน MDN พร้อมที่อยู่ต่อไปนี้:
คำอธิบายเกี่ยวกับนโยบายที่คล้ายคลึงกันของเบราว์เซอร์
โดยทั่วไปเมื่อ URL A และ URL B แตกต่างกันในแง่ของโปรโตคอลพอร์ตและชื่อโดเมนเบราว์เซอร์จะเริ่มต้นนโยบายต้นกำเนิดเดียวกันและปฏิเสธคำขอข้อมูลระหว่างเซิร์ฟเวอร์ A และ B
เมื่อพูดถึงกลยุทธ์ต้นฉบับเดียวกันความรู้ที่คุณได้รับคือตื้น คุณต้องฝึกฝนด้วยตัวเอง กลยุทธ์ต้นฉบับเดียวกันนี้สะท้อนให้เห็นได้อย่างไร? ด้านล่างฉันจะแสดงให้เห็นทีละขั้นตอนร่วมกับรหัส
1. เซิร์ฟเวอร์ A ไม่สามารถขอเซิร์ฟเวอร์ B
เนื่องจากเป็นโดเมนข้ามฉันจะสมมติว่าฉันมีชื่อโดเมนสองชื่อคือ A และ LocalHost หมายถึงว่าตัวแก้ไขโฮสต์ชื่อโดเมนบนคลาวด์อาลีบาบา Localhost ตามชื่อแนะนำคือเครื่องพัฒนาของฉัน เราจินตนาการถึงสถานการณ์ที่เราปรับใช้ไฟล์ index.html บน localhost บริการแบ็กเอนด์สปริงบูตอย่างง่ายบนเซิร์ฟเวอร์ A และให้อินเทอร์เฟซง่าย ๆ เพื่อแสดงให้เห็นถึงการโทรของไฟล์ index.html ในที่สุดเบราว์เซอร์ขอไฟล์ index.html ของ localhost และดูว่าเบราว์เซอร์แจ้งอะไร?
index.html
<! doctype html> <html> <head> <title> ทดสอบการเข้าถึงข้ามโดเมน </title> <meta charset = "utf-8"/> </head> <body> <script src = "https://cdn.bootcss.com/jquery $ (document) .ready (function () {$ .ajax ({type: "get", async: true, url: "http: //a/hello/map/getuser.json", // ประเภทอินเทอร์เฟซของคำขอบนเซิร์ฟเวอร์ a: "json", ความสำเร็จ: ฟังก์ชัน (ข้อมูล) {// </script> <h2> Hello World </h2> </body> </html>ขอไฟล์ index.html บนเบราว์เซอร์และจะแสดงดังนี้:
จะพบได้ว่าเบราว์เซอร์คำขอถูกปฏิเสธการร้องขอทำให้เราไม่อนุญาตให้มีการร้องขอข้ามโดเมน มันอึดอัดมาก วิธีแก้ปัญหา?
2. ใช้ JSONP เพื่อแก้ไขคำขอข้ามโดเมน
ก่อนอื่นมาพูดถึงหลักการ JSONP แก้ปัญหาข้ามโดเมนส่วนใหญ่ใช้ความสามารถในการข้ามโดเมนของแท็ก <Script> นั่นคือคุณลักษณะที่ที่อยู่ลิงก์ในแอตทริบิวต์ SRC สามารถเข้าถึงได้ในโดเมนเนื่องจากเรามักจะตั้งค่าแอตทริบิวต์ SRC เป็นที่อยู่ของ CDN และห้องสมุด JS ที่เกี่ยวข้อง
index.html
<! doctype html> <html> <head> <title> ทดสอบการเข้าถึงข้ามโดเมน </title> <meta charset = "utf-8"/> </head> <body> <script src = "https://cdn.bootcss.com/jquery $ (document) .ready (function () {$ .ajax ({type: "get", async: true, jsonp: "callbackname", // พารามิเตอร์อินเตอร์เฟสแบ็กเอนด์ชื่อ jsonpcallback: "callbackfunction", // callback name url: ความสำเร็จของ JSONP: ฟังก์ชั่น (ข้อมูล) {console.log ("ความสำเร็จ"); </script> <script type = "text/javascript"> var callbackfunction = function (data) {การแจ้งเตือน ('ข้อมูลที่ส่งคืนโดยอินเตอร์เฟสคือ:' + json.stringify (data)); - </script> </body> </html>รหัสอินเตอร์เฟสบนเซิร์ฟเวอร์คือ:
/** * * คลาส jsonbackcontroller * * คำอธิบาย: คอนโทรลเลอร์ส่งคืนสตริงของข้อมูล JSON อย่างง่ายและข้อมูล JSON ประกอบด้วยวัตถุผู้ใช้อย่างง่าย * * @author: Huangjiawei * @Since: 12 มิถุนายน 2018 * @version: $ revision $ $ date $ lastChanged by $ */ @restcontroller @ loggerFactory.getLogger (jsonbackcontroller.class); / *** แก้ไขข้อมูลคำขอข้ามโดเมน* @param Response* @param callbackName front-end ชื่อฟังก์ชั่นชื่อ* @return*/ @requestmapping (value = "getuser.json") โมฆะสาธารณะ getuser (httpservletResponse ตอบกลับ Response.SetContentType ("ข้อความ/JavaScript"); Writer Writer = Null; ลอง {writer = response.getWriter (); writer.write (callbackname + "("); writer.write (user.toString ()); writer.write (");"); } catch (ioexception e) {logger.error ("การตอบกลับ jsonp เขียนล้มเหลว! ข้อมูล:" + user.toString (), e); } ในที่สุด {ถ้า (writer! = null) {ลอง {writer.close (); } catch (ioexception e) {logger.error ("output stream ปิดข้อยกเว้น!", e); } writer = null; -แบ็กเอนด์ส่งผ่านในชื่อฟังก์ชันการเรียกกลับชื่อพารามิเตอร์การเรียกกลับมาแล้วจากนั้นส่งคืนชิ้นส่วนของรหัส JS ไปยังส่วนหน้า รูปแบบรหัส JS มีดังนี้:
callbackName + ( data ) + ;
เบราว์เซอร์ร้องขอไฟล์ index.html บนเซิร์ฟเวอร์ localhost และผลลัพธ์มีดังนี้:
วิธีการข้างต้นแก้ปัญหาข้ามโดเมนผ่าน jQuery + JSONP คุณไม่ได้บอกว่าคุณสามารถใช้แอตทริบิวต์ SRC ของแท็ก <Script> ได้หรือไม่ สี่.
index.html บนเซิร์ฟเวอร์ localhost
<! doctype html> <html> <head> <title> ทดสอบการเข้าถึงข้ามโดเมน </title> <meta charset = "utf-8"/> </head> <body> <script src = "https://cdn.bootcss.com/jquery callbackfunction = function (data) {alert ('ข้อมูลที่ส่งคืนโดยอินเตอร์เฟสคือ:' + json.stringify (data)); - </script> <script type = "text/javascript" src = "http: //a/hello/map/getuser.json? callbackname = callbackfunction"> </script> </body> </html>เอฟเฟกต์การแสดงผลของเบราว์เซอร์นั้นเหมือนกับด้านบน แต่ควรสังเกตที่นี่ว่า SRC หมายถึงการแนะนำไฟล์ JS เนื่องจากมันถูกเรียกโดยตรงโดยอินเทอร์เฟซและข้อมูลที่ส่งคืนโดยอินเทอร์เฟซจึงเป็นส่วนหนึ่งของรหัส JS จึงสามารถดำเนินการได้ นอกจากนี้ลำดับของแท็ก <Script> ที่สองไม่สามารถย้อนกลับได้มิฉะนั้นจะไม่พบฟังก์ชั่นการเรียกคืนข้อมูล
ที่อยู่รหัสโครงการ: https://github.com/smallercoder/jsonpdemo
ในที่สุดเราจะสรุปว่ามีวิธีแก้ปัญหามากมายสำหรับการแก้ปัญหาข้ามโดเมนและ JSONP เป็นเพียงหนึ่งในนั้นและสถานการณ์เฉพาะจะต้องวิเคราะห์อย่างละเอียด ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับคุณ ขอบคุณสำหรับการอ่าน ยินดีต้อนรับสู่ GitHub เพื่อเริ่มต้น Momo! ฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น