دليل JSONP

JSONP هي طريقة لتحميل البيانات من خوادم الطرف الثالث ، وتجاوز سياسة المصدر نفسه

بشكل افتراضي لا يمكنك تحميل ملفجسونملف من مجال ومنفذ ليس هو الحالي ، واستخدمه في تطبيقك.

قد تخدم التطبيق منlocalhost:8080، ولكن يتم تقديم واجهة برمجة التطبيقات بواسطة تطبيق Node.js آخر يعمل علىlocalhost:2001.

أو قد ترغب في الوصول إلى بعض واجهات برمجة التطبيقات المتاحة للجمهور والتي تعمل مثل JSON ، في المتصفح.

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

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

يدعم JSONP فقط GETHTTPالطريقة ، لذلك فهي أقل قدرة بكثير من CORS.

كيف يعمل

يجب أن يدعم الخادم JSONP ، على سبيل المثال يسمح لك Express باستخدام ملفResponse.jsonp()الطريقة التي تشبهResponse.json()لكنه يتعامل مع عمليات رد نداء JSONP:

res.jsonp({ username: 'Flavio' })

من جانب العميل ، تقوم بتحميل نقطة النهاية التي تحدد وظيفة رد الاتصال:

<script src="http://localhost:2001/api.json?callback=theCallbackFunction"></script>

يجب أن تكون وظيفة رد الاتصال عمومية ستتلقى بيانات JSON:

const theCallbackFunction = (data) => {
  console.log(data)
}

كان لدى jQuery طريقة سهلة لتبسيط هذا النهج من خلال تجريد JSONP في ملفajax()طريقة:

$.ajax({
  url: 'http://localhost:2001/api.json',
  dataType: 'jsonp',
  success: (data) => {
    console.log(data)
  }
})

المزيد من دروس js: