سرعان

العديد من البرامج التعليمية عبر المجال ، والممارسات المختلفة ، ومختلف الأسئلة والأجوبة عبر الإنترنت. بالإضافة إلى JSONP البسيط ، يقول الكثير من الناس إن الكورس لا يعملون ، ويفتقرون دائمًا إلى تكوينات أو اثنين من التكوينات الرئيسية. لا تريد هذه المقالة سوى حل المشكلة ، وقد تمارس كل الكود من قبل نفسك.

تحل هذه المقالة مشاكل مثل GET ، ونشرها ، وبيانات ، وملفات تعريف الارتباط في المجال المتقاطع.

ستتحدث هذه المقالة فقط عن الحصول على طلبات وطلبات البريد. يجب على القراء فهم طلبات النشر كطرق طلب أخرى باستثناء الحصول على الطلبات.

JSONP

يستخدم JSONP المبدأ القائل بأن المتصفح ليس له أي قيود متماثلة على مراجع موارد البرنامج النصي ، ويقوم بإدراج علامة نصية ديناميكية ، وسيتم تنفيذها فور تحميل المورد على الصفحة. JSONP هو بروتوكول نقل غير رسمي. تتمثل إحدى النقاط الرئيسية لهذا البروتوكول في السماح للمستخدمين بتمرير رد الاتصال أو تحديد طريقة رد الاتصال في البداية ، ويتم إعطاء المعلمات للخادم. عندما يقوم الخادم بإرجاع البيانات ، سيتم استخدام معلمة رد الاتصال كاسم دالة للف بيانات JSON ، بحيث يمكن للعميل تخصيص وظائفه الخاصة لمعالجة بيانات الإرجاع تلقائيًا.

يدعم JSONP فقط طلبات الحصول على طلبات ولكن ليس أنواعًا أخرى من طلبات HTTP مثل POST. إنه يدعم فقط طلبات HTTP للمجال. لا يمكن حل مشكلة كيفية إجراء مكالمات JavaScript بين صفحتين في مجالات مختلفة. تتمثل ميزة JSONP في أنه يدعم المتصفحات ذات الطراز القديم ، كما أن العيوب واضحة أيضًا: إنها تتطلب تخصيص العميل والخادم للتطوير. لا يمكن أن تكون البيانات التي يتم إرجاعها بواسطة الخادم بيانات JSON قياسية ، ولكن البيانات ملفوفة بواسطة رد الاتصال.

مبدأ JSONP بسيط للغاية ، ويستخدم فكرة [لا توجد مشكلة عبر المجال عندما يطلب الواجهة الأمامية موارد ثابتة].

لكنه يدعم فقط الحصول على ، يدعم فقط الحصول على ، يدعم فقط الحصول على.

لاحظ أنه نظرًا لأن هذه الطريقة تسمى JSONP ، يجب أن تستخدم بيانات الواجهة الخلفية بيانات JSON. لا يمكنك عمل سلسلة أو شيء ما ، وإلا ستجد النتيجة لا يمكن تفسيرها.

طريقة كتابة jQuery في الواجهة الأمامية

 $ .ajax ({type: "get" ، url: baseurl + "/jsonp/get" ، datatype: "jsonp" ، success: function (response) {$ ("#response"). val (json.stringify (response)) ؛}}) ؛

نوع البيانات: "JSONP". باستثناء هذا ، فإن التكوينات الأخرى هي نفس الطلبات العادية.

الخلفية springmvc التكوين

إذا كنت تستخدم أيضًا springMVC ، فقم بتكوين نصيحة JSONP ، بحيث لا تحتاج كل طريقة تحكم نكتبها إلى التفكير فيما إذا كان العميل يطلب JSONP ، وسيتم التعامل معها تلقائيًا وفقًا لذلك.

 ControllerAdvicepublic Class Jsonpadvice يمتد AbstractJsonPresponsedAdvice {public jsonpadvice () {// بهذه الطريقة ، إذا كان الطلب يحتوي على معلمة رد الاتصال ، فسيعرف Spring أن هذا هو طلب JSONP Super ("رد الاتصال") ؛ }}

تتطلب طريقة الكتابة أعلاه أن إصدار SpringMVC لا يقل عن 3.2 ، ولا يمكنني إلا أن أقول أنه يجب عليك الترقية.

الواجهة الخلفية غير SPRINGMVC

عندما بدأت العمل لأول مرة ، كان Struts2 لا يزال شائعًا. بعد بضع سنوات ، سيطر SpringMVC بشكل أساسي على السوق المحلية.

كن كسولًا ، إليك رمز زائفة ، وانقر على طريقة التفاف قبل أن تعود طريقتنا إلى الواجهة الأمامية:

 ControllerAdvicepublic Class Jsonpadvice يمتد AbstractJsonPresponsedAdvice {public jsonpadvice () {// بهذه الطريقة ، إذا كان الطلب يحتوي على معلمة رد الاتصال ، فسيعرف Spring أن هذا هو طلب JSONP Super ("رد الاتصال") ؛ }}

كورس

تقاسم الموارد عبر الأصل

CORS هي وسيلة تدعم المتصفحات الحديثة طلبات موارد النطاق عبر المجال. الاسم الكامل هو "AroginResourcesharing". عند إرسال طلب باستخدام XMLHTTPrequest ، يجد المتصفح أن الطلب لا يتوافق مع سياسة الأصل من نفس ، وسيضيف رأس طلب إلى الطلب: Origin. الخلفية تؤدي سلسلة من المعالجة. إذا تم تصميمه على قبول الطلب ، يتم إضافة رأس استجابة إلى نتيجة الإرجاع: Access-Control-Origin ؛ يحدد المتصفح ما إذا كان الرأس المقابل يحتوي على قيمة المنشأ. إذا كان هناك ، فسيقوم المتصفح بمعالجة الاستجابة ، ويمكننا الحصول على بيانات الاستجابة. إذا لم يتضمن المتصفح المتصفح ، فلا يمكننا الحصول على بيانات الاستجابة.

يستخدم Cors و JSONP نفس الغرض ، لكنه أقوى من JSONP. يدعم CORS جميع أنواع طلبات المتصفح ، وكمية البيانات المطلوبة أكبر وأكثر انفتاحًا وموجزة. يحتاج الخادم فقط إلى إرجاع البيانات المعالجة مباشرة ، وليس هناك حاجة للمعالجة الخاصة.

بعد كل شيء ، يدعم JSONP فقط طلبات الحصول على طلبات ، والتي لا يمكن بالتأكيد تلبية جميع احتياجات طلبنا ، لذلك يجب نقل الكورس.

لا يزال مطورو الويب المحليون صعبة للغاية. لا يقوم المستخدمون بترقية متصفحاتهم ، ولا يزال الرئيس يريد أن يكون المطورون متوافقين.

يدعم CORS المتصفحات التالية. في الوقت الحاضر ، أصبحت مشاكل المتصفح أقل أهمية وأقل أهمية ، وحتى Taobao لا تدعم IE7 ~~~

Chrome 3+
Firefox 3.5+
أوبرا 12+
Safari 4+
Internet Explorer 8+
طريقة كتابة jQuery في الواجهة الأمامية

فقط انظر إلى الكود:

 $ .ajax ({type: "post" ، url: baseurl + "/jsonp/post" ، datatype: 'json' ، crossdomain: true ، xhrfields: {withCredentials: true} ، data: {name: "name_from_frontend"} ، النجاح: الوظيفة (الاستجابة) $ ("#الاستجابة"). val (json.stringify (response)) ؛

نوع البيانات: "Json" ، هنا JSON ، وليس JSONP ، وليس JSONP ، وليس JSONP.

CrossDomain: صحيح ، هنا يعني استخدام طلبات النطاق المتقاطع

XHrfields: {withcredentials: true} ، بحيث يمكن للتكوين إحضار ملفات تعريف الارتباط ، وإلا لا يمكننا حتى الحفاظ على الجلسة ، والكثير من الناس محاصرون هنا. بالطبع ، إذا لم يكن لديك هذا المطلب ، فلن تحتاج إلى تكوين هذا.

الخلفية springmvc التكوين

بالنسبة لمعظم مشاريع الويب ، عادة ما تكون هناك فئات التكوين المتعلقة بـ MVC ، والتي يتم موروثة من WebMVCConfigureRadapter. إذا استخدمت أيضًا SpringMVC 4.2 أو أعلى ، فما عليك سوى إضافة هذه الطريقة مثل ما يلي:

 ConfigurationPublic Class WebConfig يمتد WebMVCConfigurerAdapter {Override public void addCorSmappings (Corsregistry Registry) {registry.addmapping ("/**/*"). المسموحات ("*") ؛ }}

إذا كنت للأسف في مشروعك ، فإن إصدار SpringMVC أقل من 4.2 ، فأنت بحاجة إلى "حفظ البلد من خلال المنحنيات":

 يمتد CrossDomainFilter من الطبقة العامة على onserrequestfilter {Override محمية void dofilterinternal (طلب httpservletrequest ، httpservletresponse استجابة ، filterchain filterchain) يلقي servletexception ، ioException {response.addheader ("Access-control-origin" أسفل على الاستجابة. Response.addheader ("Access-Control-Callam-Methods" ، "Get ، Post ، Put ، Delete") ؛ Response.addheader ("Access-Control-Headers" ، "Type-Content-Type") ؛ filterchain.dofilter (طلب ، استجابة) ؛ }}

تكوين مرشح في web.xml:

 <Ivilter> <ilter-name> crossdomainfilter </filter-name> <ilter-class> com.javadoop.filters.crossdomainfilter </filter-class> </filter> <filter-mapping> <filter-name> crossdomainfilter </filter-name> <Url-pattern>

هناك العديد من المشاريع التي تستخدم Shiro ، ويمكنك أيضًا تكوين مرشحات Shiro ، لذلك لن أقدمها هنا.

لاحظ أنني أتحدث عن التكوينات العامة للغاية ، والتي يمكن تكوينها في مثل هذه التكوينات العامة لمعظم المشاريع. يجب أن يعرف القراء كيفية مطابقة التكوينات مثل "*" في المقالة.

إذا وجد القارئ أن المتصفح يطالب بأنه لا يمكن استخدام رمز "*" ، فيمكن للقارئ الحصول على المرجع (request.getheader ("المرجع") في رأس الطلب وفقًا لكائن الطلب في المرشح أعلاه ، ثم تعيين "الوصول إلى السيطرة على الأصول":

 requireder = request.getheader ("enderer") ؛ if (stringUtils.isNotBlank (reparer)) {url url = url new url (المرجع) ؛ string Origin = url.getProtocol () + ": //" + url.gethost () ؛ Response.addHeader ("Access-Control-Ollow-Origin" ، Origin) ؛} آخر {desponse.addheader ("Access-Control-Origin" ، "*") ؛}

في الواجهة الواجهة غير اليهوكري

لقد ولت الأيام التي تأكل فيها jQuery مع خدعة واحدة تمامًا. سأتحدث هنا عن كيفية حل مشكلة النشر المتقاطع إذا كنت لا تستخدم jQuery.

دعونا نقدم JS الأصلي:

 الوظيفة CreateCorSRequest (الطريقة ، url) {var xhr = new xmlhttprequest () ؛ إذا كان ("withcredentials" في XHR) {// إذا كانت هناك سمة withcredentials ، فهو بالتأكيد كائن xmlHttpRequest2. انظر إلى المعلمة الثالثة XHR.Open (الطريقة ، URL ، صواب) ؛ } آخر إذا (typeof xDomainRequest! = "undefined") {// يتم استخدام هذا الكائن بواسطة IE لطلب عبر المجالات xhr = new xDomainRequest () ؛ XHR.Open (الطريقة ، URL) ؛ } آخر {// إذا كان الأمر كذلك ، للأسف ، لا يدعم المتصفح cors xhr = null ؛ } return xhr ؛} var xhr = createCorsRequest ('get' ، url) ؛ if (! xhr) {رمي خطأ جديد ('cors غير مدعوم') ؛}

من بينها ، Chrome و Firefox و Opera و Safari ، تستخدم هذه المتصفحات "الصديقة للمبرمج" كائنات XMLHTTPrequest2. IE يستخدم XdomainRequest.

لخص

ما ورد أعلاه هو كل شيء عن حل المشكلات المتقاطعة بسرعة: JSONP و CORS. آمل أن يكون ذلك مفيدًا للجميع. يمكن للأصدقاء المهتمين الاستمرار في الرجوع إلى الموضوعات الأخرى ذات الصلة على هذا الموقع. إذا كانت هناك أي أوجه قصور ، فيرجى ترك رسالة لإشارةها!