إزاي تحل مشكلة الـ CORS Error في لارافيل (Laravel) ببساطة؟
مين فينا كمبرمج ويب ممرش باللحظة السودة دي؟ بتبني الـ API بتاعك زي الفل، وتروح تنده عليه من الـ Frontend بتاعك (React أو Vue مثلاً)، وفجأة تلاقي الكونسول (Console) منور أحمر بكلمة CORS Error. بتبدأ تشك في نفسك وفي الكود وفي المتصفح، وبتقول هو أنا عملت إيه غلط؟ الحقيقة إنك معملتش حاجة غلط، ده مجرد "سياسة أمان" المتصفح بيطبقها عشان يحمي المستخدم.
Table of contents [Show]
يعني إيه أصلاً CORS؟
اختصار الـ Cross-Origin Resource Sharing (مشاركة الموارد عبر مصادر مختلفة) هي آلية أمان بيستخدمها المتصفح عشان يمنع المواقع من إنها تبعت طلبات (Requests) لموقع تاني إلا لو الموقع التاني ده "عطى إذن صريح".
تخيل إن الـ API بتاعك هو "قلعة"، والـ Frontend بتاعك هو "زائر". المتصفح هنا هو "حارس البوابة". لو الزائر ده جاي من عنوان (Domain) مختلف عن عنوان القلعة، الحارس بيقوله: "استنى يا ريس، معاك تصريح بالدخول؟". التصريح ده هو الـ CORS Headers اللي بنبعتها من الـ Backend.
ليه المشكلة دي بتحصل أصلاً؟
المتصفحات بتطبق حاجة اسمها Same-Origin Policy. دي بتمنع الـ Scripts اللي شغالة في صفحة ويب إنها تتواصل مع سيرفر تاني إلا لو السيرفر ده بيسمح بده بوضوح من خلال الهيدرز (Headers). ده بيحمي المستخدم إن موقع خبيث يسرق بياناته من موقع تاني هو عامل عليه Log in.
حل المشكلة في لارافيل (Laravel) خطوة بخطوة
لحسن الحظ، إطار العمل Laravel موفر لنا مكتبة ممتازة بتيجي مدمجة معاه عشان نحل المشكلة دي في ثواني. الخطوات دي هي اللي هتنقذ يومك:
1. التأكد من وجود ملف الإعدادات
في نسخ لارافيل الحديثة، الملف موجود تلقائياً في config/cors.php. لو مش لاقيه، ممكن تنشره باستخدام الأمر ده في الـ Terminal:
php artisan config:publish cors
2. ضبط إعدادات ملف cors.php
افتح الملف ده وركز في النقط دي:
- paths: هنا بتحدد الـ API اللي محتاج تفتح له الصلاحية. غالباً بنخليها
['api/*', 'sanctum/csrf-cookie']. - allowed_origins: ده أهم سطر. هنا بتكتب الـ Domain بتاع الـ Frontend بتاعك، زي
['http://localhost:3000']. لو عايز تفتحها للكل (مش مستحسن في الـ Production)، ممكن تحط['*']. - allowed_methods: بتحدد الطلبات المسموح بيها زي
['GET', 'POST', 'PUT', 'DELETE']. - allowed_headers: هنا بتسمح بالهيدرز اللي الـ Frontend هيبعتها، زي
['Content-Type', 'Authorization'].
3. مسح الكاش (Cache)
بعد ما تعدل ملف الـ Config، لازم تمسح الكاش عشان الإعدادات الجديدة تسمع في السيرفر:
php artisan config:clear
نصيحة من أخ لمبرمج
يا صاحبي، الـ CORS مش عدوك، ده حارس أمن بيحميك ويحمي المستخدمين بتوعك. بلاش تستسهل وتحط '*' في كل حاجة وتفتح السيرفر بتاعك لأي حد في الـ Production. حدد بالظبط إيه اللي محتاجه، وافتح النطاقات (Domains) اللي بتوثق فيها بس.
اتعلم تقرأ الـ Network Tab في الـ Chrome DevTools كويس، لأنها بتعرفك بالظبط إيه الهيدر اللي ناقص أو إيه الـ Method اللي مرفوضة. الاستمرارية في التعلم هي اللي هتحولك من "مبتدئ بيخاف من الـ Errors" لـ "محترف بيحل المشاكل في دقايق". بالتوفيق في الكود بتاعك!
