تعد أخطاء CORS (Cross-Origin Resource Sharing) من بين أكثر المشاكل المحبطة التي يواجهها المطورون عند بناء تطبيقات الويب. إذا رأيت رسالة الخطأ المخيفة No Access-Control-Allow-Origin header is p
تعد أخطاء CORS (Cross-Origin Resource Sharing) من بين أكثر المشاكل المحبطة التي يواجهها المطورون عند بناء تطبيقات الويب. إذا رأيت رسالة الخطأ المخيفة No Access-Control-Allow-O…
فهم CORS
CORS هي ميزة أمان يتم تنفيذها بواسطة المتصفحات لمنع المواقع الضارة من الوصول إلى الموارد على نطاقات مختلفة. عندما يحاول كود JavaScript الخاص بك جلب البيانات من أصل مختلف (d
الحل 1: قم بتكوين الخادم الخاص بك
🎨 AI Generated: الحل 1: قم بتكوين الخادم الخاص بك
الحل الصحيح هو تكوين الخادم الخاص بك لتضمين CORS headers المناسبة. بالنسبة لـ Express.js:
javascript
const cors = require( cors ); app.use(cors());
أو أضف headers يدوياً:
code
res.setHeader( Access-Control-Allow-Origin , * ); res.setHeader( Access-Control-Allow-Methods , GET, POST, PUT, DELETE );
الحل 2: استخدم Proxy
أثناء التطوير، قم بتكوين proxy في ملف package.json الخاص بك:
code
proxy : http://localhost:5000
أو استخدم development proxy server لتجاوز قيود CORS.
الحل 3: JSONP (Legacy)
🎨 AI Generated: الحل 3: JSONP (Legacy)
فقط لـ GET requests، يمكن لـ JSONP تجاوز CORS، على الرغم من أنه قديم إلى حد كبير وأقل أماناً.
الحل 4: Browser Extensions (للتطوير فقط)
قم بتثبيت إضافات المتصفح CORS للاختبار، ولكن لا تعتمد عليها أبداً في الإنتاج.
Best Practices
🎨 AI Generated: Best Practices
- حدد origins دقيقة بدلاً من استخدام wildcards (*)
- السماح فقط بأساليب HTTP الضرورية
- التعامل مع طلبات preflight OPTIONS بشكل صحيح
- لا تقم أبدًا بتعطيل CORS في الإنتاج دون فهم الآثار الأمنية
تذكر: أخطاء CORS هي ميزات أمان المتصفح، وليست عيوبًا برمجية. الحل الصحيح دائمًا تقريبًا هو التكوين السليم للخادم.
🚀 ابقَ في صدارة منحنى التكنولوجيا
احصل على insights تقنية يومية وreviews صادقة وأدلة عملية.
✍️ Leave a Comment