الآن دعنا نناقش القضايا ذات الصلة المتمثلة في بيانات طلب المتصفح عبر المجال. قد لا يكون من المعتاد للغاية القول أن هذا يرجع إلى أن رفض بيانات طلب المجال المتقاطع ليس فريدًا للمتصفح. السبب وراء عدم تمكن المجال العرضي للبيانات هو أن المتصفحات تنفذ بشكل أساسي مواصفات أمان تسمى "سياسة الأصل من نفس". ما هي المواصفات المحددة؟ وجدنا ملف تعريف على MDN مع العنوان التالي:
شرح السياسة المتماثلة للمتصفح
بشكل عام ، عندما يختلف URL A و URL B من حيث البروتوكول والمنفذ والاسم المجال ، سيبدأ المتصفح سياسة الأصل من نفس الأصل وترفض طلبات البيانات بين الخوادم A و B.
عند الحديث عن الاستراتيجية الأثرية ، فإن المعرفة التي تحصل عليها ضحلة. يجب أن تمارسها بنفسك. كيف تنعكس الاستراتيجية الأثرية؟ أدناه سأظهر خطوة خطوة بخطوة مع الكود.
1. الخادم A لا يمكن أن يطلب الخادم ب
نظرًا لأنه عبر المجال ، سأفترض أن لديّ اسم مجالان ، وهما A و LocalHost. وسيلة أن يستضيف المحرر اسم المجال على Alibaba Cloud. 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/3.1/jquery.min $ (document) .Ready (function () {$ .ajax ({type: "get" ، async: true ، url: "http: //a/hello/map/getuser.json" ، // request type type on server a: "json" ، success: function (data) }) ؛ </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/3.1/jquery.min $ (document) .Ready (function () {$ .ajax ({type: "get" ، async: true ، jsonp: "callbackName" ، // backend interface name jsonpcallback: التنسيق هو نجاح JSONP: دالة (بيانات) {console.log ("النجاح") ؛ </script> <script type = "text/javaScript"> var callbackFunction = function (data) {Alert ('البيانات التي يتم إرجاعها بواسطة الواجهة هي:' + json.stringify (data)) ؛ } ؛ </script> </body> </html>رمز الواجهة على الخادم هو:
/** * * الفئة JsonbackController. * * الوصف: تقوم وحدة التحكم بإرجاع سلسلة من بيانات JSON البسيطة ، وتتكون بيانات JSON من كائن مستخدم بسيط * * Author: Huangjiawei * since: 12 يونيو 2018 * version: $ revision $ $ $ $ lastChangedBy $ */ @reprontroller querging (value = "/map" loggerfactory.getLogger (jsonbackController.class) ؛ / *** حل بيانات الطلب المتقاطع-Response* param* param callbackName front-end formback اسم وظيفة callback* @REGARN*/ REQUESTMAPPING (value = "getUser.json") public void getUser (httpservletresponse response ، @requestparam stringname) استجابة. كاتب الكاتب = فارغ ؛ حاول {constr = response.getWriter () ؛ Writer.Write (callbackName + "(") ؛ writer.write (user.toString ()) ؛ constr.write (") ؛") ؛ } catch (ioException e) {logger.error ("jsonp response recept fans! data:" + user.toString () ، e) ؛ } أخيرًا {if (writer! = null) {try {writer.close () ؛ } catch (ioException e) {logger.error ("إخراج دفق إغلاق الاستثناء!" ، e) ؛ } كاتب = فارغ ؛ }}}}تمر الواجهة الخلفية في اسم وظيفة الاتصال CallbackName للمعلمة ، ثم تقوم بإرجاع قطعة من رمز JS إلى الواجهة الأمامية. تنسيق رمز JS كما يلي:
callbackName + ( data ) + ;
يطلب المتصفح ملف index.html على خادم المضيف المحلي ، والنتيجة هي كما يلي:
الطريقة أعلاه تحل مشاكل المجال عبر jQuery + JSONP. ألم تقل فقط أنه يمكنك استخدام سمة SRC لعلامة <script>؟ أربعة.
index.html على خادم المضيف المحلي
<! doctype html> <html> <head> <title> اختبار الوصول عبر المجال </title> <meta charset = "utf-8"/> </head> <body> <script src = "https://cdn.bootcss.com/jquery/3.1/jquery.min var callbackFunction = function (data) {Alert ('البيانات التي يتم إرجاعها بواسطة الواجهة هي:' + json.stringify (data)) ؛ } ؛ </script> <script type = "text/javaScript" src = "http: //a/hello/map/getuser.json؟تأثير عرض المتصفح هو نفسه كما هو موضح أعلاه. ولكن تجدر الإشارة هنا إلى أن SRC تعني تقديم ملف JS. نظرًا لأنه يطلق عليه مباشرة الواجهة ، وتحدث البيانات التي يتم إرجاعها بواسطة الواجهة كقطعة من رمز JS ، يمكن تنفيذها. بالإضافة إلى ذلك ، لا يمكن عكس ترتيب العلامة الثانية <script> ، وإلا فلن يتم العثور على وظيفة رد الاتصال.
عنوان رمز المشروع: https://github.com/smallercoder/jsonpdemo
أخيرًا ، لتلخيص ، هناك العديد من الحلول لحلول النطاق عبر المجال ، JSONP هو واحد منهم فقط ، ويجب تحليل الموقف المحدد بالتفصيل. آمل أن يكون هذا المقال مفيدًا لك. شكرا لك على القراءة. مرحبًا بكم في GitHub للبدء ، مومو! آمل أيضًا أن يدعم الجميع wulin.com أكثر.