CORS في JavaScript: لماذا يعمل Postman بينما لا يعمل المتصفح؟

مقدمة: عندما يقول المتصفح "لا" ويقول Postman "نعم"

تخيل موقفًا: تكتب واجهة أمامية بلغة JavaScript، وتقوم بطلب fetch إلى API. في الرد - خطأ أحمر في وحدة التحكم:

تم حظر الوصول إلى fetch من 'https://api.example.com/data' من الأصل 'http://localhost:3000' بواسطة سياسة CORS: لا يوجد رأس 'Access-Control-Allow-Origin' في المورد المطلوب.

تتشبث برأسك، تفتح Postman، تلصق نفس URL، تضغط إرسال - ويا للعجب، تصل البيانات! الخادم يعمل؟ يعمل. لماذا إذن يمنع المتصفح الطلب؟

هذا الموقف هو كلاسيكي في تطوير الويب. على Stack Overflow، جمع هذا السؤال آلاف المشاهدات. اليوم سننظر تحت الغطاء ونفهم لماذا يحدث هذا، وكيف يعمل CORS وكيفية إصلاحه. هيا بنا!

ما هو CORS ولماذا هو مطلوب؟

CORS (مشاركة الموارد عبر النطاقات) هي آلية أمان في المتصفح. تمنع JavaScript من موقع واحد (مثل http://localhost:3000) من إجراء طلبات إلى موقع آخر (مثل https://api.example.com)، ما لم يسمح الخادم بذلك صراحةً.

لماذا؟ لمنع المهاجم من سرقة بياناتك من موقع آخر عبر متصفحك. بدون CORS، يمكن لأي سكريبت قراءة بريدك الإلكتروني وحساباتك المصرفية - أمر مروع.

لكن هناك فارق: CORS يعمل فقط في المتصفح. Postman، curl، الطلبات من الخادم (Node.js، Python) - لا تتحقق من CORS. هذا هو السبب الأول والرئيسي وراء عمل Postman وعدم عمل JavaScript.

كيف يعمل CORS تحت الغطاء: بكلمات بسيطة

عندما يقوم JavaScript الخاص بك (مثل fetch) بطلب عبر النطاقات، يقوم المتصفح بأمرين:

1. يتحقق من نوع الطلب.
2. إذا لزم الأمر - يرسل طلب preflight (OPTIONS).

طلب بسيط مقابل Preflight

هناك نوعان من الطلبات عبر النطاقات:

• طلب بسيط - إذا كنت تستخدم GET أو POST أو HEAD، والرؤوس أساسية فقط (Content-Type: text/plain, application/x-www-form-urlencoded, multipart/form-data). يرسل المتصفح الطلب وينظر إلى رأس الاستجابة Access-Control-Allow-Origin.
• طلب Preflight - إذا كنت تستخدم رؤوسًا غير قياسية (مثل Authorization)، أو طرق PUT/DELETE، أو Content-Type: application/json. يرسل المتصفح أولاً طلب OPTIONS ليسأل: "هل يمكن إجراء هذا الطلب؟"

إليك مثال على preflight في الكود:

fetch('https://api.example.com/data', {  method: 'POST',  headers: {    'Content-Type': 'application/json', // هذا يسبب preflight    'Authorization': 'Bearer my-token'  },  body: JSON.stringify({ key: 'value' })}).then(response => response.json()).then(data => console.log(data)).catch(err => console.error('CORS error:', err));

إذا لم يستجب الخادم لـ OPTIONS برأس Access-Control-Allow-Origin صحيح - يمنع المتصفح الطلب الرئيسي.

لماذا يتجاهل Postman CORS؟

Postman ليس متصفحًا. لا يستخدم سياسة المصدر نفسه (Same-Origin Policy).他只是 يرسل طلب HTTP ويحصل على الرد. لا يهمه من أين جاء الطلب - لا يتحقق من رؤوس CORS. يمكن للخادم إرجاع أي شيء، وسيظهر Postman الرد.

لذلك، عندما تختبر API عبر Postman، ترى أن الخادم يعمل. لكن المتصفح يتطلب أن يسمح الخادم صراحةً بالوصول من نطاقك.

كيفية إصلاح خطأ CORS: 3 طرق حقيقية

1. تكوين الخادم (الطريقة الصحيحة)

إذا كان لديك وصول إلى الخادم، أضف الرأس Access-Control-Allow-Origin. على سبيل المثال، على Node.js مع Express:

const express = require('express');const app = ex