من نحن؟

✍️ مقدمة:

في أحد المشاريع البرمجية التي عملت عليها مؤخرًا، واجهت مشكلة مزعجة أثناء ربط واجهة React مع واجهة خلفية Laravel.
المشكلة كانت واضحة:

[❌ لم يتم السماح بطلبات الـ API من الواجهة الأمامية – وظهرت رسالة الخطأ "CORS Policy: No ‘Access-Control-Allow-Origin’ header..."]

في هذا المقال، سأشارك معك كيف واجهت هذه المشكلة، وما هو سببها، وكيف تم حلها خطوة بخطوة بطريقة عملية، 

بدون استخدام حلول مؤقتة أو غير آمنة.

🧩 ما هي مشكلة CORS؟

CORS (Cross-Origin Resource Sharing) هي سياسة أمان تُطبق في المتصفحات لمنع طلبات HTTP بين مصادر مختلفة إذا لم يكن ذلك مصرحًا.

مثال:

• الواجهة الأمامية موجودة على http://localhost:3000

• الواجهة الخلفية (Laravel) موجودة على http://localhost:8000

المتصفح يعتبر أن هذه "Origins" مختلفة ويمنع الطلب إلا إذا صرح السيرفر بذلك.

🔥 المشكلة التي ظهرت عندي:

كنت أرسل طلب POST من React إلى Laravel API، وظهرت الرسالة التالية في Console:

Access to fetch at 'http://localhost:8000/api/login' from origin

 'http://localhost:3000' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

✅ خطوات الحل العملي:

1. التأكد من تثبيت مكتبة CORS في Laravel:

افتح الـ Terminal وثبت الحزمة (إذا لم تكن مثبتة):

composer require fruitcake/laravel-cors

2. التحقق من إعدادات cors.php

افتح الملف:
config/cors.php

وتأكد أن الإعدادات كالتالي:

'paths' => ['api/*'],

'allowed_methods' => ['*'],

'allowed_origins' => ['http://localhost:3000'],

'allowed_headers' => ['*'],

'supports_credentials' => true,

✅ ملاحظة: تأكد أنك وضعت origin الصحيح للمشروع الأمامي.

3. السماح في ملف Kernel.php

افتح الملف:
app/Http/Kernel.php

وتأكد من إضافة middleware في الـ $middleware العام:

\Fruitcake\Cors\HandleCors::class,

4. حذف الكاش (مهم جداً)

php artisan config:clear
php artisan route:clear
php artisan cache:clear

5. إعادة تشغيل الخادم

php artisan serve

🎉 النتيجة:

بعد تنفيذ الخطوات السابقة، اختفى الخطأ تمامًا، وبدأت الطلبات بين React و Laravel تعمل بنجاح.

🧠 ملاحظات إضافية:

• لا تستخدم '*' في allowed_origins في بيئة الإنتاج – قد تُشكل خطراً أمنياً.

• CORS لا يُحل من جهة العميل (React)، بل من جهة الخادم (Laravel).

• يمكنك استخدام أدوات مثل Postman لاختبار الطلبات والتأكد من وجود Header:
  Access-Control-Allow-Origin

✅ الخلاصة:

إذا كنت تبني مشروع بواجهة React وواجهة خلفية Laravel، فاحتمال ظهور مشكلة CORS كبير، خصوصًا أثناء التطوير.
المهم هو فهم السبب، وتعديل إعدادات Laravel بشكل صحيح بدلاً من استخدام إضافات أو تجاوزات.

📥 هل واجهت مشكلة مشابهة؟

شاركها معنا في التعليقات، وسنناقش حلولها في المقالات القادمة من هذه السلسلة!