CORS wa'logh Hoch vaD yaj

CORS errors console Daq Qagh poH Daq tu'lu', chay' Qotlh Sovbe', 'ej Access-Control-Allow-Origin: * Stack Overflow vo' copy-paste "solve". nuq qaS Sov pagh. naDev nuq qaS 'ej browser qatlh 'oH Qu'.

server Qagh pagh - browser Qagh

wa'DIch: CORS (Cross-Origin Resource Sharing) browser Qu'. server pagh. browser Daq "CORS error" endpoint curl Daq Dun - curl CORS Qu'be'. server response reH Daq. browser JavaScript laD chaw' pagh.

same-origin policy: script https://app.example.com Daq https://api.other.com response laD laHbe' (request Daq laH). pagh vaj website Hoch bank Daq authenticated requests Daq (cookies automatic). CORS server origin pIm chaw' mIw.

Origins yIngu'

cha' URL origin rap: scheme, host, port rap.

https://app.example.com:443/page1
https://app.example.com:443/page2   → same origin (path doesn't matter)
http://app.example.com               → different origin (scheme differs)
https://api.example.com              → different origin (host differs)
https://app.example.com:8080         → different origin (port differs)

development Daq localhost:3000 localhost:4000 Daq jatlh: cross-origin request. vaj local dev CORS reH tu'.

simple requests 'ej preflight

Hoch cross-origin request rap pagh. "simple" request (extra round trip pagh): method GET, HEAD, POST; headers Dach (Accept, Accept-Language, Content-Language, Content-Type); Content-Type application/x-www-form-urlencoded, multipart/form-data, text/plain.

pIm: PUT, custom header (Authorization, X-Api-Key), JSON body (application/json) - preflight: browser OPTIONS request wa'DIch, chaw' jey, real request nob.

OPTIONS /api/orders HTTP/1.1
Origin: https://app.example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: content-type, authorization

server preflight jang:

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

Access-Control-Max-Age performance vaD: browser preflight result cache seconds. pagh vaj PUT JSON API cha' request.

Express server mach

app.use((req, res, next) => {
  const allowedOrigins = ['https://app.example.com', 'http://localhost:3000'];
  const origin = req.headers.origin;

  if (allowedOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
    res.setHeader('Vary', 'Origin');
  }

  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.setHeader('Access-Control-Max-Age', '86400');

  if (req.method === 'OPTIONS') {
    return res.sendStatus(204);
  }
  next();
});

Vary: Origin header: response cache (CDN, proxy) vaj. response body request Origin header Daq Dung. wa' origin response pIm origin Daq nob pagh.

credentials opt-in cha'logh

request cookies pagh Authorization header cross-origin session vaD vaj cha' side jang:

// Client
fetch('https://api.example.com/orders', {
  credentials: 'include',
});

// Server response
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Credentials: true

cha' Qagh: Access-Control-Allow-Origin: * credentials Daq spec Qotlh - specific origin nob, wildcard pagh. server Daq Access-Control-Allow-Credentials: true qaw vaj browser response Qaw' (request Qapla' 'ach).

* qatlh lazy shortcut pagh

Access-Control-Allow-Origin: *: "website Hoch response laD". public unauthenticated API (weather, public CDN) vaj Dun. user-specific data vaj same-origin policy Hoch Qaw': user website Hoch background fetch data laD (credentials Daq). vaj credentialed requests wildcard Qotlh (spec Daq).

yaj

CORS server Qagh pagh, browser obstacle pagh - browser origin-by-origin opt-in poQ. simple requests header check. custom header, method, JSON body vaj preflight. allowed origin, headers, credentials flag Dun vaj errors Qaw'.