لماذا تعمل الـ API في Postman لكنها تفشل في المتصفح؟
مشكلة شائعة يواجهها كثير من المطورين: الـ API يعمل بشكل طبيعي في Postman لكنه يفشل عند استخدامه في المتصفح. في هذا المقال نشرح الأسباب الحقيقية مثل CORS، الكوكيز، واختلاف طريقة تعامل المتصفح مع الطلبات، مع بعض النصائح لتسهيل عملية الـ debugging
لو انت 𝐅𝐫𝐨𝐧𝐭𝐞𝐧𝐝 𝐃𝐞𝐯... المشهد ده أكيد حصلك
الـ Backend بعتلك الـ API، قالك "جاهز ومجرب، كله شغال تمام".
انت فتحت المشروع، عملت integration... ومفيش حاجة شغالة
رحت تكلمه: "الـ API مش شغال!" قالك: "مستحيل، أنا جربته على Postman وكله تمام."
وهنا بتبدأ رحلة الـ debugging اللي ملهاش آخر...
المشكلة مش في الكود - المشكلة في طريقة الاختبار!
عشان كده خليني أقولك الحقيقة اللي 𝐁𝐚𝐜𝐤𝐞𝐧𝐝 𝐃𝐞𝐯𝐬 بينسوها:
🔴 الـ 𝐏𝐨𝐬𝐭𝐦𝐚𝐧 مش 𝐁𝐫𝐨𝐰𝐬𝐞𝐫 - والفرق كبير
الـ API لما يشتغل على Postman، ده مش معناه إنه هيشتغل في الـ production... ليه؟
أولاً: الـ CORS مش موجود في Postman لأنه بيتجاهل الـ CORS تماماً - لكن الـ Browser بيطبقه بصرامة. يعني الـ API ممكن يشتغل في Postman، لكن أول ما تعمل fetch من Frontend هتلاقي:
𝐀𝐜𝐜𝐞𝐬𝐬 𝐭𝐨 𝐟𝐞𝐭𝐜𝐡 𝐡𝐚𝐬 𝐛𝐞𝐞𝐧 𝐛𝐥𝐨𝐜𝐤𝐞𝐝 𝐛𝐲 𝐂𝐎𝐑𝐒 𝐩𝐨𝐥𝐢𝐜𝐲
ثانياً: الـ Security Headers مختلفة في headers الـ Browser بيمنعها زي Referer أو Origin، لكن Postman بيبعتها عادي. لما تيجي تعمل request من الكود، الـ Backend مش هيلاقيها وممكن الـ Auth يفشل.
ثالثاً: الـ Cookies والـ Sessions بتتعامل مختلف Postman مش بيحترم الـ SameSite أو الـ Secure flags. لكن الـ Browser عنده قواعد صارمة - وده بيكسر الـ authentication.
رابعاً: الـ JSON Structure مش دايماً متطابق انت في Postman بتكتب الـ body يدوي، لكن في الـ Frontend بييجي من form أو state - وممكن يبقى في extra fields أو nested objects مش متوقعها.
خامساً: الـ Middleware بيتصرف مختلف لما الـ request ييجي من client حقيقي، الـ middleware ممكن يتعامل معاه بشكل مختلف - rate limiting، validation، أو حتى logging.
💡 الحل؟ اختبر في بيئة حقيقية
أولاً: استخدم 𝐒𝐰𝐚𝐠𝐠𝐞𝐫 بدل Postman أو معاه لو الـ Backend رافع الـ Docker container بتاعه وفيه Swagger UI، استخدمه... ليه؟
الـ 𝐒𝐰𝐚𝐠𝐠𝐞𝐫 بيشتغل في الـ Browser، يعني هتلاقي مشاكل الـ CORS فوراً
مش محتاج تعمل setup في Postman
الـ Documentation جاهزة قدامك ف تقدر تختبر كل الـ endpoints بسرعة
ثانياً: اعمل Quick Frontend Test قبل ما تسلم حتى لو Frontend مش جاهز، اعمل HTML file بسيط فيه fetch requests - هتكتشف المشاكل بدري.
ثالثاً: شغّل الـ Network Tab في DevTools افتح 𝐂𝐡𝐫𝐨𝐦𝐞 𝐃𝐞𝐯𝐓𝐨𝐨𝐥𝐬، روح على Network، وشوف الـ requests والـ responses الحقيقية. هتلاقي أخطاء مش بتظهر في Postman أبداً.
رابعاً: راجع الـ CORS من الأول متستناش Frontend يقولك في مشكلة - اتأكد إن الـ CORS configured صح من البداية.
خامساً: اعمل Integration Testing مع Mock Frontend استخدم tools زي Cypress أو Playwright - هتختبر الـ API كأنه Frontend حقيقي بيكلمه.
🟢 الخلاصة؟
الـ Postman أداة ممتازة للـ development السريع - لكن مش كفاية للـ production.
الـ Browser عنده قواعده الخاصة، والـ API لازم يكون جاهز ليها.
لو عايز تسلم شغل نضيف من أول مرة:
اختبر في بيئة قريبة من الـ production
استخدم 𝐒𝐰𝐚𝐠𝐠𝐞𝐫 لو متاح
افتح الـ 𝐃𝐞𝐯𝐓𝐨𝐨𝐥𝐬 وراجع الـ Network
اتأكد من الـ CORS من البداية
والـ debugging هيقل بشكل كبير.