كيف تغلبت على خطأ CORS

تخيل هذا المشهد: لقد انتهيت للتو من إعداد الواجهة الأمامية (Frontend). واجهة المستخدم تبدو نظيفة، الأزرار تعمل، والآن حان الوقت لربطها بـ الـ API الخاصة بالواجهة الخلفية (Backend) الجديدة اللامعة. تقوم بإجراء أول استدعاء fetch()، وفجأة — نص أحمر يظهر في الـ Console:

“Access to fetch at ‘http://yourapi.com/data‘ from origin ‘http://localhost:3000‘ has been blocked by CORS policy.”

حدث هذا لي مؤخرًا (مرة أخرى). ورغم أنني تعاملت مع أخطاء CORS من قبل، إلا أن الأمر يستغرق دائمًا لحظة لتذكر سبب حدوث ذلك — وكيفية إصلاحه دون كسر شيء آخر.

دعني أستعرض معك ما فعلته، ما الذي نجح، وبعض الأشياء التي تعلمتها بالطريقة الصعبة.

🔍 إذًا، ما هو CORS في الأساس؟

كلمة CORS هي اختصار لـ Cross-Origin Resource Sharing (مشاركة الموارد عبر الأصول). إنها ميزة أمان في المتصفح تمنع الواجهة الأمامية (التي تعمل على نطاق/Domain معين) من تقديم طلبات إلى واجهة خلفية مستضافة على نطاق آخر — ما لم يسمح الخادم بذلك صراحةً.

قد يبدو الأمر مزعجًا، لكنه في الواقع يحمي المستخدمين من هجمات خطيرة.

🧪 الإعداد الذي تسبب في الخطأ

  • الواجهة الأمامية: تطبيق React يعمل على localhost:3000
  • الواجهة الخلفية: خادم Express يعمل على localhost:5000
  • الطلب: جلب بيانات JSON من api/posts/

يرى المتصفح هذا كطلب “عابر للأصول” (Cross-origin) ويقوم بحظره ما لم يرسل الخادم الترويسات (Headers) الصحيحة.

✅ كيف قمت بإصلاحه (طريقة Express)

في خادم Express الخاص بي، قمت بتثبيت حزمة cors:

Bash

npm install cors

ثم أضفت هذا إلى الجزء العلوي من ملف index.js:

JavaScript

const cors = require('cors');
app.use(cors());

و… بوم! اختفى الخطأ تمامًا. ولكن — هذا يجعل الـ API الخاصة بك مفتوحة لـ جميع المصادر، وهو أمر مقبول في مرحلة التطوير (Dev)، ولكن ليس دائمًا في بيئة الإنتاج (Production).

🛡️ إعداد CORS أكثر أمانًا للإنتاج

بدلاً من السماح بكل شيء، قمت بتقييده ليعمل فقط مع نطاق الواجهة الأمامية الخاص بي:

JavaScript

const corsOptions = {
  origin: 'https://myfrontend.com',
  optionsSuccessStatus: 200,
};
app.use(cors(corsOptions));

الآن، يتم قبول الطلبات القادمة من https://myfrontend.com فقط — وهذا أكثر أمانًا بكثير.

⚙️ حلول بديلة (للاختبار فقط)

  • استخدام بروكسي (Proxy): في مرحلة التطوير، أقوم أحيانًا بإعداد بروكسي في vite.config.js أو create-react-app لتوجيه استدعاءات الـ API عبر خادم الواجهة الأمامية.
  • استخدام CORS Proxy: إذا كنت أختبر شيئًا بسرعة، فإن خدمات مثل https://cors-anywhere.herokuapp.com/ تسمح لك بتجاوز CORS تمامًا (لكن لا يُنصح بذلك لأي عمل جاد).

💡 الدرس المستفاد

في كل مرة أواجه فيها مشكلة CORS، أذكر نفسي: إنه ليس خطأ برمجيًا (Bug)، بل ميزة أمان. وإصلاحه يعني فهم كيفية تكوين الواجهة الخلفية الخاصة بك، وليس مجرد التحايل عليه.

إذا كنت عالقًا في مشكلة مشابهة، جرب الحل البسيط أولاً — ولكن تأكد من تأمينه وتقييده قبل إطلاق المشروع (Going Live).

أخبرني إذا واجهت حالة CORS غريبة من قبل أو لديك طريقة ذكية لحلها — دائمًا ما يثير فضولي كيف يتعامل المطورون الآخرون مع هذا الأمر.

اترك ردّاً

مقالات مشابهة