حل مشكلة CORS Error في Laravel

من الأخطاء الشائعة التي تواجه مطوري Laravel عند ربط الواجهة الأمامية (Frontend) مع واجهة برمجة التطبيقات (API) هو خطأ "Access to fetch has been blocked by CORS policy". هذا الخطأ لا يشير إلى مشكلة في الكود نفسه، بل إلى إعدادات الحماية الافتراضية في المتصفح.

ما هو CORS؟

CORS اختصار لـ Cross-Origin Resource Sharing، وهي آلية أمان في المتصفحات تمنع إرسال الطلبات بين نطاقات (Domains) مختلفة إلا إذا منح السيرفر صلاحية بذلك بشكل صريح.

على سبيل المثال، إذا كانت واجهة المستخدم تعمل على http://localhost:3000 بينما الـ API يعمل على http://localhost:8000، فإن المتصفح سيمنع الاتصال إلا إذا تم السماح بذلك من خلال إعدادات CORS.

سبب المشكلة

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

إدارة CORS في Laravel

في الإصدارات القديمة من Laravel (قبل الإصدار 9)، كان المطور يحتاج إلى تثبيت حزمة خارجية مثل:

composer require fruitcake/laravel-cors
  

أما في الإصدارات الحديثة (ابتداءً من Laravel 9 وحتى Laravel 11)، فقد أصبحت إعدادات CORS مُدمجة افتراضيًا ضمن الإطار من خلال HandleCors middleware، دون الحاجة لأي حزم إضافية.

طريقة ضبط الإعدادات

لإتاحة الاتصال بين الـ Frontend والـ API، يمكنك تعديل إعدادات CORS من خلال الملف التالي:

config/cors.php

ولتجربة سريعة، يمكن استخدام الإعدادات التالية:

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:3000'],
    'allowed_headers' => ['*'],
];
  

كذلك تأكد من وجود \Illuminate\Http\Middleware\HandleCors::class ضمن قائمة الـ middleware في ملف app/Http/Kernel.php.

بعد الإعداد

بمجرد ضبط الإعدادات بشكل صحيح، سيتمكن الـ Frontend من إرسال الطلبات إلى الـ API بدون أي قيود أو أخطاء متعلقة بـ CORS. لا حاجة لأي حلول مؤقتة أو تجاوزات أمنية.

الخلاصة

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

ابتداءً من Laravel 9، إعدادات CORS أصبحت جزءًا أساسيًا من الإطار — فقط عدّل القيم في config/cors.php، وكل شيء سيعمل بسلاسة.