خطأ CORS من أكثر ما يربك مطوّري الويب، ويظهر هكذا في وحدة التحكّم:
Access to fetch at 'https://api.example.com' from origin
'http://localhost:3000' has been blocked by CORS policy
لنفهمه ونحلّه بالطريقة الصحيحة.
ما هو CORS ولماذا يحدث؟
CORS اختصار لـ Cross-Origin Resource Sharing. هو إجراء أمان في المتصفّح يمنع صفحةً على نطاق من قراءة بيانات من نطاق آخر، إلّا إذا سمح الخادم بذلك.
المتصفّح يسأل الخادم: "هل تسمح لهذا الموقع بقراءة بياناتك؟" فإن لم يجد إذنًا صريحًا، يحجب الردّ ويظهر خطأ CORS.
نقطة مهمّة: المشكلة ليست في كودك الأمامي، بل في أن الخادم لم يرسل ترويسة الإذن.
الحلّ الصحيح: من جهة الخادم (Backend)
أضف ترويسة Access-Control-Allow-Origin في الخادم.
في Node.js / Express
import cors from "cors";
app.use(cors({ origin: "https://your-site.com" }));
يدويًّا بترويسة صريحة
res.setHeader("Access-Control-Allow-Origin", "https://your-site.com");
res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
للتجربة فقط يمكن استخدام
*للسماح للجميع، لكن لا تستخدمه في الإنتاج — حدّد نطاقاتك الموثوقة.
ماذا لو لم تملك الخادم؟
إذا كنت تستهلك API خارجيًّا لا تتحكّم فيه:
- استخدم خادمًا وسيطًا (Proxy) خاصًّا بك يطلب البيانات ويمرّرها لواجهتك.
- بعض الإطارات توفّر proxy للتطوير المحلّي.
جدول سريع
| الوضع | الحلّ |
|---|---|
| تملك الخادم | أضف ترويسة Access-Control-Allow-Origin |
| لا تملك الخادم | أنشئ Proxy وسيط |
| الإنتاج | حدّد الأصول الموثوقة فقط (لا *) |
الخلاصة
CORS ليس عطلًا بل حماية. حلّه يكون في الخادم بالسماح لأصلك صراحةً، أو عبر proxy وسيط. تجنّب تعطيله من المتصفّح.