ما هي CORS وكيف تتعامل معها في Node؟

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) هي آلية أمان في المتصفح تتحكم في ما إذا كانت صفحة ويب من **origin** واحد يمكنها إرسال طلبات إلى خادم على **origin مختلف**. بشكل افتراضي، يحجب المتصفح الطلبات عبر الـ origins؛ يجب على الخادم السماح بها صراحةً عبر رؤوس الاستجابة.

## مبدأ نفس الـ Origin والمشكلة

```text
Origin = scheme + host + port. These are DIFFERENT origins:
  https://app.example.com   →  https://api.example.com   (different host)
  http://localhost:3000     →  http://localhost:4000      (different port)

Browser blocks the cross-origin request UNLESS the server sends CORS headers allowing it.
```

لذا فإن تطبيق React على `localhost:3000` يستدعي API على `localhost:4000` يعتبر cross-origin — يحجبه المتصفح ما لم توافق API عليه.

## رؤوس الاستجابة الرئيسية

```text
Access-Control-Allow-Origin: https://app.example.com   ← who is allowed
Access-Control-Allow-Methods: GET, POST, PUT, DELETE   ← allowed methods
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true                 ← allow cookies/auth
```

يتحكم الخادم في الوصول بإرسال هذه الرؤوس. يقرأها المتصفح ويقرر ما إذا كان يسمح للصفحة برؤية الاستجابة.

## التعامل مع CORS في Express

```js
import cors from "cors";

// ❌ allow everything — convenient but insecure for credentialed/private APIs
app.use(cors());

// ✅ restrict to specific trusted origins
app.use(cors({
  origin: ["https://app.example.com", "http://localhost:3000"], // allowlist
  methods: ["GET", "POST", "PUT", "DELETE"],
  credentials: true, // allow cookies — REQUIRES a specific origin (not "*")
}));
```

تقوم middleware `cors` بتعيين الرؤوس لك. للإنتاج، **قيّد `origin` بقائمة بيضاء** بدلاً من `*` — لاحظ أن السماح بالبيانات الاعتماديّة (`credentials: true`) غير متوافق مع البدل `*`.

## طلبات Preflight

```text
For "non-simple" requests (PUT/DELETE, custom headers, JSON), the browser first
sends an OPTIONS "preflight" request to check permissions. The cors middleware
handles responding to it automatically.
```

## مفهوم خاطئ شائع

```text
CORS is enforced by the BROWSER, not the server. It does NOT protect your API
from non-browser clients (curl, Postman, other servers) — those ignore CORS.
It only governs what browser JavaScript on other origins can do.
```

## لماذا يهم

تُعتبر CORS من أكثر الأشياء المربكة في تطوير الويب — تقريباً كل إعداد front-end-to-API يواجهها (خاصة في التطوير المحلي مع منافذ مختلفة).

فهم *لماذا* موجودة (أمان same-origin في المتصفح)، وكيف يوافق عليها الخادم عبر الرؤوس، وكيفية إعدادها بأمان (قوائم بيضاء للـ origins، معالجة حذرة للبيانات الاعتماديّة)، والحقيقة الحاسمة أنها آلية *متصفح* (وليست تفويض API) أمر ضروري للاتصال الصحيح والآمن بين front-ends و Node APIs بدون حجب أو إفراط في كشف الخادم.