ما هي بعض الأدوات الشائعة لمحاكاة الطلبات عبر الأصل في بيئة تنمية محلية

فهم cors

مشاركة الموارد عبر الأصل (CORS) هي آلية أمان يتم تنفيذها في المتصفحات التي تقيد تطبيقات الويب التي تعمل على أصل واحد (المجال ، البروتوكول ، المنفذ) من الوصول إلى الموارد على أصل مختلف ما لم يسمح الخادم بشكل صريح من خلال رؤوس HTTP محددة. تعمل CORS من الخوادم التي ترسل رؤوسًا معروفة مثل "Access-Control-Origin`" للإشارة إلى المجالات المسموح بها للوصول إلى الموارد. تفرض المتصفحات ذلك عن طريق إرسال طلب "Preplight" (طلب خيارات HTTP) لأنواع معينة من المكالمات المتقاطعة للتحقق من الأذونات قبل تقديم الطلب الفعلي. لا يمكن استخدام رؤوس رؤوس CORS فحسب ، بل يمكن أيضًا استخدام أساليب ورؤوس HTTP ، وما إذا كان يمكن إرسال بيانات اعتماد مثل ملفات تعريف الارتباط.

تحديات التنمية المحلية

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

أدوات وطرق لمحاكاة الكورس أو تجاوزها محليًا

1. Proxying الخادم المحلي

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

-خوادم تطوير مع دعم الوكيل المدمج: العديد من أدوات تطوير الواجهة الأمامية مثل Vite أو WebPack Dev Server أو إنشاء دعم تطبيق React تكوين وكيل. على سبيل المثال ، يتيح إنشاء تطبيق React للمطورين تحديد وكيل في `package.json` أو` setupproxy.js` الذي يقوم بإعادة توجيه مكالمات API إلى خادم آخر يعمل على منفذ أو مجال مختلف. وبهذه الطريقة ، يعتقد المتصفح أنه يتواصل مع نفس الأصل نظرًا لأن الطلبات يتم تقديمها إلى خادم Dev نفسه ، والتي تقوم بعد ذلك بإعادة توجيهها إلى خادم API الهدف.

-خوادم الوكيل المستقلة: يمكن أن تكون أدوات مثل HTTP-Proxy-Middleware (لـ Node.js) أو الوكلاء المحليين مثل Nginx المكونة على الآلات المحلية بمثابة وكلاء لتوجيه الطلبات وإضافة رؤوس CORs اللازمة. يمكن للمطورين تكوين هذه الخوادم لتعديل الاستجابات أثناء الطيران لتضمين `` access-control-arigin: *`أو غيرها من الرؤوس المناسبة.

2. نسخ API المحلية CORS-CORS

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

3. ملحقات المتصفح للتنمية

للاختبار السريع أو تصحيح الأخطاء ، يستخدم العديد من المطورين ملحقات المتصفح التي تعطل أو تعديل سلوك CORS في المتصفحات مؤقتًا. يجب استخدام هذه الأدوات فقط في التطوير ، ولا يتم الإنتاج أبدًا:

- CORS Unblock for Chrome: يعدل هذا الامتداد رؤوس الطلبات ويمكّن طلبات الأصل المتقاطع عن طريق حقن الرؤوس اللازمة على ردود لتجاوز إنفاذ كورس المتصفح.

- CORS في كل مكان لـ Firefox: على غرار امتداد Chrome ، فإنه يبطح قيود CORS على وإيقاف تشغيله ، مما يسمح للمطورين باختبار المكالمات المتقاطعة دون تغيير تكوينات الخادم.

- قائمة تطوير Safari: يتيح Safari تعطيل القيود المفروضة على الأصل مؤقتًا من خلال القائمة ، وهو مفيد لمستخدمي Mac يقومون بإجراء الاختبارات المحلية.

4. تشغيل خادم ويب محلي بدلاً من فتح الملفات

أحد الأسباب الجذرية لأخطاء CORS هو تحميل الملفات مباشرة باستخدام بروتوكول "ملف: //` في المتصفحات. تشير العديد من البرامج التعليمية والأسئلة والأجوبة إلى أن فتح صفحات HTML مباشرة بدون خادم ويب يؤدي إلى أخطاء CORS لأن المتصفحات تمنع العديد من العمليات للأمان. وبالتالي ، فإن تشغيل خادم HTTP المحلي الحد الأدنى باستخدام أدوات مثل خادم HTTP المدمج في Python (`Python3 -M http.server`) ، يتيح حزمة Node's` http-server` ، أو الخادم المباشر أصولًا محلية صحيحة وتجنب هذه الأخطاء.

5. تعديل رؤوس استجابة الخادم

عند تطوير واجهة برمجة التطبيقات الخاصة بك أو خدمة الواجهة الخلفية ، يتم إضافة رؤوس CORS عادة عن طريق تضمين البرامج الوسيطة أو تكوين خادم الويب لدعم CORS. وضعت الأطر واللغات الخلفية الشائعة طرقًا لتمكين الكورس:

- Node.js/Express: استخدام حزمة "Cors` الوسيطة" يبسط إضافة رؤوس CORS.

- ASP.NET Web API: يدعم سمات مثل "[EnableCors]` التي تسمح بتحديد الأصول والأساليب والرؤوس المسموح بها لطلبات الأصل.

-Django: يتم استخدام البرامج الوسيطة مثل `django-cors-headers 'لتمكين دعم CORs محليًا.

6.

تتيح بعض الخدمات عبر الإنترنت مثل Beeceptor للمطورين اختبار واجهات برمجة التطبيقات وتجاوز CORS عن طريق توجيه طلبات من خلال خوادم الوكيل الخاصة بهم. تضيف هذه الخدمات رؤوس الكورس المناسبة ، لذلك تقبل المتصفحات الردود. هذا النهج مفيد للتصحيح السريع عندما يكون الإعداد المحلي غير ممكن ولكن يجب استخدامه بحذر وليس في بيئات الإنتاج.

***

ملخص الأدوات والتقنيات الشائعة

- Dev Server Proxying: استخدام إمكانيات الوكيل في أدوات مثل Vite ، إنشاء تطبيق React ، WebPack Dev Server.
-خوادم الوكيل المحلية: HTTP-proxy-middleware في node.js ، تم تكوين NGINX كبديل.
- API المحلي مع تمكين CORS: تشغيل حاويات Docker أو مثيلات API المحلية التي تم تكوينها للتطوير مع CORS.
- امتدادات المتصفح: CORS Unblock (Chrome) ، CORS في كل مكان (Firefox) ، Safari تعطيل القيود المتقاطعة.
-خادم HTTP المحلي: تشغيل Python's `http.server` أو node's` http-server` أو server live server بدلاً من استخدام `file: //` urls.
-الوسيطة الإطارية الخلفية: حزمة `cors` لـ node.js ،` [EnableCors] `in asp.net web api ،` django-cors-headers` for django.
- خدمات وكيل الطرف الثالث: بيكبتور وخدمات مماثلة لتجاوز كورس مؤقتًا.