CORS ਕੀ ਹੈ ਅਤੇ ਤੁਸੀਂ ਇਸ ਨੂੰ Node ਵਿੱਚ ਕਿਵੇਂ ਸੰਭਾਲਦੇ ਹੋ?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਸੁਰੱਖਿਆ ਵਿਧੀ ਹੈ ਜੋ ਨਿਯੰਤ੍ਰਿਤ ਕਰਦੀ ਹੈ ਕਿ ਇੱਕ **ਮੂਲ** ਤੋਂ ਵੈੱਬ ਪੰਨਾ ਇੱਕ ਵੱਖ **ਮੂਲ** 'ਤੇ ਸਰਵਰ ਨੂੰ ਬੇਨਤੀਆਂ ਕਰ ਸਕਦਾ ਹੈ ਜਾਂ ਨਹੀਂ। ਡਿਫ਼ਾਲਟ ਦੇ ਅਨੁਸਾਰ, ਬ੍ਰਾਊਜ਼ਰ ਕ੍ਰਾਸ-ਓਰੀਜਿਨ ਬੇਨਤੀਆਂ ਨੂੰ ਰੋਕਦੇ ਹਨ; ਸਰਵਰ ਨੂੰ ਜਵਾਬ ਹੈਡਰ ਦੁਆਰਾ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਉਨ੍ਹਾਂ ਨੂੰ ਆਗਿਆ ਦੇਣੀ ਚਾਹੀਦੀ ਹੈ।

## Same-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.
```

So a React app on `localhost:3000` calling an API on `localhost:4000` is cross-origin — the browser blocks it unless the API opts in.

## ਮੁੱਖ ਜਵਾਬ ਹੈਡਰ

```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
```

ਸਰਵਰ ਇਨ੍ਹਾਂ ਹੈਡਰ ਨੂੰ ਭੇਜ ਕੇ ਪਹੁੰਚ ਨੂੰ ਨਿਯੰਤ੍ਰਿਤ ਕਰਦਾ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਉਨ੍ਹਾਂ ਨੂੰ ਪੜ੍ਹਦਾ ਹੈ ਅਤੇ ਫੈਸਲਾ ਕਰਦਾ ਹੈ ਕਿ ਪੰਨੇ ਨੂੰ ਜਵਾਬ ਵੇਖਣਾ ਚਾਹੀਦਾ ਹੈ ਜਾਂ ਨਹੀਂ।

## Express ਵਿੱਚ CORS ਨੂੰ ਸੰਭਾਲਣਾ

```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 "*")
}));
```

`cors` middleware ਤੁਹਾਡੇ ਲਈ ਹੈਡਰ ਸੈਟ ਕਰਦਾ ਹੈ। ਪ੍ਰੋਡਕਸ਼ਨ ਲਈ, **`origin` ਨੂੰ `*` ਦੀ ਬਜਾਏ ਇੱਕ allowlist ਤੱਕ ਸੀਮਿਤ ਕਰੋ** — ਅਤੇ ਨੋਟ ਕਰੋ ਕਿ ਪ੍ਰਮਾਣਿਕਤਾ ਦੀ ਅਨੁਮਤੀ (`credentials: true`) wildcard `*` ਦੇ ਨਾਲ ਅਸੰਗਤ ਹੈ।

## 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 ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਵਿੱਚ ਸਭ ਤੋਂ ਆਮ ਪਤਨਸ਼ੀਲ ਬਿੰਦੂਆਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ — ਲਗਭਗ ਹਰ ਫ੍ਰੰਟ-ਐਂਡ-ਟੂ-API ਸੈੱਟਅਪ ਇਸ ਦਾ ਸਾਹਮਣਾ ਕਰਦਾ ਹੈ (ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਵੱਖ ਪੋਰਟਾਂ ਦੇ ਨਾਲ ਸਥਾਨਿਕ ਡਿਵ ਵਿੱਚ)।

*ਕਿਉਂ* ਇਹ ਮੌਜੂਦ ਹੈ (ਬ੍ਰਾਊਜ਼ਰ same-origin ਸੁਰੱਖਿਆ), ਸਰਵਰ ਹੈਡਰ ਦੁਆਰਾ ਕਿਵੇਂ ਚੁਣਦਾ ਹੈ, ਇਸ ਨੂੰ ਸੁਰੱਖਿਤ ਤੌਰ 'ਤੇ ਕਿਵੇਂ ਸੰਰਚਿਤ ਕਰਨਾ ਹੈ (allowlist origins, ਸਾਵਧਾਨ ਪ੍ਰਮਾਣਿਕਤਾ ਹੈਂਡਲਿੰਗ), ਅਤੇ ਮਹੱਤਵਪੂਰਨ ਤੱਥ ਕਿ ਇਹ ਇੱਕ *ਬ੍ਰਾਊਜ਼ਰ* ਵਿਧੀ ਹੈ (API ਪ੍ਰਮਾਣਿਕਤਾ ਨਹੀਂ) ਨੂੰ ਸਮਝਣਾ ਫ੍ਰੰਟ-ਐਂਡ ਅਤੇ Node APIs ਨੂੰ ਸਹੀ ਅਤੇ ਸੁਰੱਖਿਤ ਤੌਰ 'ਤੇ ਜੋੜਨ ਲਈ ਬਿਨਾ ਬਲਾਕ ਜਾਂ ਓਵਰ-ਐਕਸਪੋਜ਼ ਸਰਵਰ ਦੇ ਲਈ ਲਾਜ਼ਮੀ ਹੈ।