การแนะนำ
Cross-Domain เป็นคำถามที่ฉันมักจะถามในการสัมภาษณ์ประจำวัน คำนี้ปรากฏขึ้นบ่อยครั้งในโลกส่วนหน้า เหตุผลหลักคือมันเกิดจากข้อ จำกัด ด้านความปลอดภัย (กลยุทธ์ต้นฉบับเดียวกันนั่นคือจาวาสคริปต์หรือคุกกี้สามารถเข้าถึงเนื้อหาภายใต้โดเมนเดียวกันเท่านั้น) เนื่องจากเราจำเป็นต้องดำเนินการข้ามโดเมนอย่างหลีกเลี่ยงไม่ได้ในระหว่างการพัฒนาโครงการประจำวันความสามารถข้ามโดเมนจึงเป็นหนึ่งในทักษะพื้นฐานของวิศวกรส่วนหน้า
เช่นเดียวกับโซลูชันข้ามโดเมนส่วนใหญ่ JSONP ก็เป็นตัวเลือกของฉัน แต่วันหนึ่งความต้องการ PM เปลี่ยนไปและต้องเปลี่ยนฟังก์ชั่นบางอย่างเพื่อสนับสนุนการโพสต์เนื่องจากปริมาณข้อมูลที่ส่งมีขนาดค่อนข้างใหญ่และไม่สามารถจัดการแบบฟอร์ม GET ได้ ดังนั้นฉันจึงต้องดิ้นรนกับ CORS ที่รู้จักกันมานาน (การแบ่งปันทรัพยากรข้ามแหล่งกำเนิด) และบทความที่นี่เป็นสัญลักษณ์สั้น ๆ และสรุปในช่วงระยะเวลาการดิ้นรน
• CORS สามารถทำอะไรได้:
การใช้ AJAX ปกติต้องพิจารณาปัญหาข้ามโดเมนตามปกติดังนั้นโปรแกรมเมอร์ที่ยอดเยี่ยมจึงต้องดิ้นรนกับวิธีแก้ปัญหาข้ามโดเมนเช่น JSONP, Flash, Ifame, XHR2 ฯลฯ
•หลักการของ Cors:
CORS กำหนดกลไกสำหรับการเข้าถึงข้ามโดเมนซึ่งช่วยให้ AJAX สามารถเข้าถึงการเข้าถึงข้ามโดเมนได้ CORS อนุญาตให้แอปพลิเคชันเครือข่ายในโดเมนหนึ่งส่งคำขอ AJAX ข้ามโดเมนไปยังโดเมนอื่น การใช้งานฟังก์ชั่นนี้ง่ายมากเพียงแค่ส่งส่วนหัวการตอบกลับโดยเซิร์ฟเวอร์
มาที่หัวข้อด้านล่างเพื่อดูรายละเอียดดังนี้:
คำขอ HTTP ข้ามไซต์หมายถึงคำขอ HTTP ซึ่งโดเมนที่ทรัพยากรเริ่มต้นคำขอนั้นแตกต่างจากโดเมนที่ทรัพยากรเริ่มต้นคำขอ
ตัวอย่างเช่นถ้าฉันแนะนำทรัพยากรของสถานี B (www.b.com/images/1.jpg) ผ่านแท็ก <Img> ในเว็บไซต์ A (www.a.com) จากนั้นสถานี A จะเริ่มคำขอข้ามไซต์ไปยังสถานี B.
อนุญาตให้มีการร้องขอข้ามไซต์สำหรับทรัพยากรรูปภาพประเภทนี้และคำขอข้ามไซต์ที่คล้ายกันรวมถึงไฟล์ CSS ไฟล์ JavaScript ฯลฯ
อย่างไรก็ตามหากคำขอ HTTP เริ่มต้นในสคริปต์มันจะถูก จำกัด โดยเบราว์เซอร์ด้วยเหตุผลด้านความปลอดภัย ตัวอย่างเช่นในการเริ่มต้นคำขอ HTTP โดยใช้วัตถุ XMLHTTPREQUEST คุณต้องปฏิบัติตามนโยบายต้นกำเนิดเดียวกัน
"นโยบายต้นกำเนิดเดียวกัน" ที่เรียกว่าเว็บแอปพลิเคชันสามารถใช้วัตถุ XMLHTTPRequest เพื่อเริ่มต้นคำขอ HTTP ไปยังโดเมนที่ต้นกำเนิดได้ แหล่งที่มาของคำขอและคำขอคำขอนี้จะต้องอยู่ในโดเมนเดียวกัน
ตัวอย่างเช่น http://www.a.com โปรโตคอลของเว็บไซต์นี้คือ http ชื่อโดเมนคือ www.a.com และพอร์ตเริ่มต้นคือ 80 จากนั้นต่อไปนี้เป็นสถานการณ์ที่คล้ายคลึงกัน:
• http: //www.a.com/index.html homogen
• https: //www.a.com/a.html แหล่งที่แตกต่างกัน (โปรโตคอลที่แตกต่างกัน)
• http: //service.a.com/testservice/test แหล่งที่มาที่แตกต่างกัน (ชื่อโดเมนแตกต่างกัน)
• http: //www.b.com/index.html แหล่งที่มาที่แตกต่างกัน (ชื่อโดเมนแตกต่างกัน)
• http: //www.a.com: 8080/index.html แหล่งที่มาที่แตกต่างกัน (พอร์ตต่าง ๆ )
เพื่อพัฒนาแอพพลิเคชั่นเว็บที่ทรงพลังและสมบูรณ์ยิ่งขึ้นคำขอข้ามโดเมนเป็นเรื่องธรรมดามาก ดังนั้นคุณจะทำคำขอข้ามโดเมนได้อย่างไรโดยไม่ยอมแพ้ความปลอดภัย?
W3C แนะนำกลไกใหม่คือการแบ่งปันทรัพยากรข้ามแหล่งกำเนิด (CORS)
การแบ่งปันทรัพยากรข้ามแหล่งกำเนิด (CORS) ทำให้มั่นใจได้ถึงความปลอดภัยของการร้องขอผ่านการประกาศการทำงานร่วมกันของไคลเอนต์ + เซิร์ฟเวอร์ เซิร์ฟเวอร์จะเพิ่มชุดพารามิเตอร์การร้องขอ HTTP (เช่นการควบคุมการเข้าถึง-Ollow-Origin ฯลฯ ) ลงในส่วนหัวคำขอ HTTP เพื่อ จำกัด การร้องขอโดเมนและประเภทคำขอใดที่ยอมรับได้ ไคลเอนต์จะต้องประกาศแหล่งที่มาของตัวเอง (ORGIN) เมื่อเริ่มการร้องขอมิฉะนั้นเซิร์ฟเวอร์จะไม่ประมวลผล หากลูกค้าไม่ได้ประกาศคำขอจะถูกสกัดกั้นโดยตรงโดยเบราว์เซอร์และไม่สามารถเข้าถึงเซิร์ฟเวอร์ได้ หลังจากได้รับคำขอ HTTP เซิร์ฟเวอร์จะเปรียบเทียบโดเมนและคำขอจากโดเมนเดียวกันเท่านั้นจะถูกประมวลผล
ตัวอย่างของการใช้ CORS เพื่อใช้คำขอข้ามโดเมน:
ลูกค้า:
ฟังก์ชั่น gethello () {var xhr = ใหม่ xmlhttprequest (); xhr.open ("โพสต์", "http://b.example.com/test.ashx", true); xhr.setrequestheader ("content-type", "แอปพลิเคชัน // ประกาศแหล่งที่มาของคำขอ XHR.SetRequestheader ("Origin", "http://a.example.com"); xhr.onreadystatechange = function () {ถ้า (xhr.readystate == 4 && xhr.status == 200) xhr.ResponSetext; console.info (ResponsetExt);}} xhr.send ();}เซิร์ฟเวอร์:
การทดสอบระดับสาธารณะ: ihttphandler {โมฆะสาธารณะ ProcessRequest (บริบท httpContext) {context.response.contentType = "ข้อความ/plain"; // ประกาศการรับคำขอจากบริบททั้งหมด isreusable {get {return false;}}}เปิดใช้งานการเข้าถึงข้ามโดเมนในเว็บ API
CORS เป็นคำสั่งด้านเซิร์ฟเวอร์และการทำงานร่วมกันของไคลเอนต์เพื่อให้แน่ใจว่ามีการร้องขอความปลอดภัย ดังนั้นหากคุณต้องการเปิดใช้งาน CORS ใน Web API คุณต้องกำหนดค่าตามนั้น โชคดีที่ทีม ASP.NET ของ Microsoft ให้บริการโซลูชันที่เปิดใช้งานข้ามโดเมนอย่างเป็นทางการซึ่งจำเป็นต้องเพิ่มใน NuGet เท่านั้น
จากนั้นใช้การกำหนดค่าต่อไปนี้ใน app_start/webapiconfig.cs เพื่อให้ได้การเข้าถึงข้ามโดเมน:
คลาสสแตติกระดับสาธารณะ webapiconfig {public static void register (httpConfiguration config) {// การกำหนดค่าและบริการ Web API และบริการ // กำหนดค่าเว็บ API เพื่อใช้การตรวจสอบโทเค็น Token เท่านั้น config.suppressdefaulthostauthentication (); config.filters.add (HostauthenticationFilter ใหม่ (oauthdefaults.authenticationType)); // web API การกำหนดเส้นทาง config.maphttpattributeroutes () config.routes.maphtproute "api/{คอนโทรลเลอร์}/{id}", ค่าเริ่มต้น: ใหม่ {id = routeparameter.optional}); // อนุญาตให้ใช้เว็บ API API Cross-Domain Access enableCrossSiteRequests (config); config.formatters.jsonformatter.supportedmediatypes.add (ใหม่ enableCrossSiteRequests (httpConfiguration config) {var cors = ใหม่ enableCorSattribute (ต้นกำเนิด: "*", ส่วนหัว: "*", วิธีการ: "*"); config.enableCors (CORS);}}}เนื่องจากเบราว์เซอร์ด้านล่าง IE10 ไม่รองรับ CORS CORS จึงไม่ได้เป็นโซลูชันข้ามโดเมนกระแสหลักในประเทศจีนในปัจจุบัน อย่างไรก็ตามด้วยการเปิดตัวของ Windows 10 และการลดลงอย่างค่อยเป็นค่อยไปของ IE อาจเป็นไปได้ว่า CORS จะกลายเป็นโซลูชันมาตรฐานข้ามโดเมนในอนาคตอันใกล้
ด้านบนเป็นโซลูชัน JS Cross-Domain ที่แนะนำโดยตัวแก้ไขให้คุณ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!