مقدمة
المجال المتقاطع هو سؤال أطرحه غالبًا في المقابلات اليومية. يظهر هذا المصطلح بشكل متكرر في العالم الأمامي. والسبب الرئيسي هو أنه بسبب قيود الأمن (استراتيجية الأرقام الأصلية ، أي JavaScript أو ملفات تعريف الارتباط يمكنها فقط الوصول إلى المحتوى ضمن نفس المجال). نظرًا لأننا نحتاج حتماً إلى إجراء عمليات عبر المجال أثناء تطوير المشروع اليومي ، فإن إمكانيات المجال المتقاطع هي أيضًا واحدة من المهارات الأساسية للمهندسين الأماميين.
مثل معظم حلول المجال المتقاطع ، فإن JSONP هو خياري أيضًا ، ولكن في يوم من الأيام ، تم تغيير PM ، ويجب تغيير وظيفة معينة لدعم المنشور ، لأن كمية البيانات المرسلة كبيرة نسبيًا ، ولا يمكن التعامل مع النموذج. لذلك ، كنت أعاني من كورس المعروفين منذ فترة طويلة (مشاركة الموارد المتقاطعة) ، والمقال هنا هو تدوين موجز وملخص خلال الفترة التي تكافح.
• ما الذي يمكن أن يفعله الكورس:
يتطلب الاستخدام العادي لـ AJAX النظر العادي في مشكلات النطاق عبر المجال ، لذا فقد كافح المبرمجون العظماء أيضًا مع حلول لمشكلات النطاق المتقاطع ، مثل JSONP ، Flash ، Ifame ، XHR2 ، إلخ.
• مبدأ الكورس:
يحدد 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 متجانسة
• 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) أمان الطلبات من خلال إعلان Client + Server التعاوني. سيقوم الخادم بإضافة سلسلة من معلمات طلب HTTP (مثل Access-Control-Origin ، وما إلى ذلك) إلى رأس طلب HTTP للحد من طلبات المجال وأنواع الطلبات المقبولة. يجب على العميل إعلان مصدره (ORGIN) عند بدء طلب ، وإلا فلن يقوم الخادم بمعالجته. إذا لم يعلن العميل ، فسيتم اعتراض الطلب بشكل مباشر من قبل المتصفح ولا يمكنه الوصول إلى الخادم. بعد تلقي طلب HTTP ، سيقوم الخادم بمقارنة المجالات ، وسيتم معالجة الطلبات فقط من نفس المجال.
مثال على استخدام CORS لتنفيذ طلبات النطاق المتقاطع:
عميل:
دالة gethello () {var xhr = new xmlhttprequest () ؛ xhr.open ("post" ، "http://b.example.com/test.ashx" ، true) ؛ xhr.setRequestheader ("content-type" ، "application/x-www-form-urlenceded") ؛ // إعلان مصدر الطلب XHR.SetRequestHeader ("Origin" ، "http://a.example.com") ؛ XHR.Responsetext ؛ console.info (besponseText) ؛}} xhr.send () ؛}الخادم:
اختبار الفئة العامة: ihttphandler {public void processRequest (httpcontext context) {context.response.contenttype = "text/plain" ؛ isReusable {get {return false ؛}}}تمكين الوصول عبر المجال في واجهة برمجة تطبيقات الويب
CORS عبارة عن عبارة تعاون من جانب الخادم وعلم العميل لضمان أمان الطلبات. لذلك ، إذا كنت بحاجة إلى تمكين CORS في واجهة برمجة تطبيقات الويب ، فأنت بحاجة أيضًا إلى تكوينه وفقًا لذلك. لحسن الحظ ، يوفر فريق Microsoft ASP.NET حلًا رسميًا يتم تمكين المجال المتقاطع ، والذي يجب إضافته فقط في Nuget.
ثم استخدم التكوين التالي في app_start/webapiconfig.cs لتحقيق الوصول عبر المجال:
الفئة الثابتة العامة webapiconfig {سجل باطل ثابت عام (تكوين httpConfiguration) {// تكوين ويب واجهة برمجة التطبيقات والخدمات // تكوين واجهة برمجة تطبيقات الويب لاستخدام مصادقة الرمز المميز للحامل فقط. config.suppressDefaulThoStaUthentication () ؛ config.filters.add (مضيف جديد مضيف ، (OauthDefaults.AuthenticationType)) ؛ "API/{controller}/{id}" ، الافتراضات: new {id = routeparameter.optional}) ؛ // السماح للوصول إلى واجهة برمجة تطبيقات عبر الإنترنت enableCrossSiteRequests (config) ؛ config.formatters.jsonformatter.supportedMedededIdiS.Add (mediaPeeDeaderval new) ؛ enableCrossSiteRequests (httpconfiguration config) {var cors = new EnableCorSattribute (Origins: "*" ، headers: "*" ، methods: "*") ؛ config.enableCors (cors) ؛}}نظرًا لأن المتصفحات أدناه لا تدعم CORS ، فإن CORS ليس حلاً رئيسيًا في المجال عبر الصين في الوقت الحاضر. ومع ذلك ، مع إصدار Windows 10 والتراجع التدريجي لـ IE ، قد يكون من المتوقع أن يصبح CORS حلًا قياسيًا للمجال في المستقبل القريب.
ما سبق هو حل JS عبر المجال الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك!