CORS શું છે અને તમે Node માં તેને કેવી રીતે સંભાળો છો?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) એ બ્રાઉজર સુરક્ષા મેકેનિઝમ છે જે નિયંત્રણ કરે છે કે એક **origin** પર વેબ પૃષ્ઠ **અલગ origin** પર સર્વર માટે વિનંતીઓ કરી શકે છે કે કેમ. ડિફૉલ્ટ રીતે, બ્રાઉજર ક્રોસ-origin વિનંતીઓને અવરોધિત કરે છે; સર્વરે તેમને રেસપોન્સ હેડર દ્વારા સ્પષ્ટપણે અનુમતિ આપવી જોઈએ.

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

તેથી `localhost:3000` પર React app જે `localhost:4000` પર API ને કૉલ કરે છે તે 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
```

સર્વર આ હેડર્સ મોકલીને ઍક્સેસ નિયંત્રણ કરે છે. બ્રાઉજર તેમને વાંચે છે અને નક્કી કરે છે કે પૃષ્ઠને રેસપોન્સ દેખાય તે અનુમતિ છે કે કેમ.

## 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 પર ограничિत કરો** `*` ના બદલે — અને નોંધ લો કે creedientials (`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 એ વેબ વિકાસમાં સૌથી સામાન્ય અડચણોમાંથી એક છે — લગભગ હર front-end-થી-API સેટআપ તેનો સામનો કરે છે (ખાસ કરીને સ્થાનિક વિકાસમાં વિવિધ પોર્ટ્સ સાથે).

તે શા માટે અસ્તિત્વમાં છે (બ્રાઉજર same-origin સુરક્ષા), સર્વર હેડર્સ દ્વારા કેવી રીતે સહમત થાય છે, તેને સુરક્ષિત રીતે કેવી રીતે ગોઠવવું (origins allowlist, સાવધ creedientials હેન્ડલિંગ), અને નિર્ણાયક હકીકત કે તે એક *બ્રાઉજર* મેકેનિઝમ છે (API authorization નહીં) તે Node APIs ને front-ends સાથે સાચી રીતે અને સુરક્ષિત રીતે જોડવા માટે આવશ્યક છે બ્લોક થયા વિના અથવા સર્વરને ઓવર-એક્સપોઝ કર્યા વિના.