CORS 진단 실습 랩: OPTIONS 사전 비행 요청 분석 및 헤더 구성
브라우저의 사전 비행 요청 발생 조건을 파악하고 서버 응답 헤더를 정밀하게 구성하여 CORS 에러를 완벽히 해결한다.
1. Production Scenario & Incident
다른 도메인의 프론트엔드에서 커스텀 헤더를 포함한 API 호출 시 브라우저가 CORS 정책 위반으로 응답을 차단하고 있습니다.
2. Architectural Background & RFC Standards
브라우저는 안전을 위해 본 요청 전 OPTIONS 사전 비행을 보내며, 서버가 적절한 Access-Control-Allow-* 헤더를 회신해야 본 요청이 허용됩니다.
- Origin Definition: An origin consists of Scheme + Hostname + Port (e.g., `https://` + `example.com` + `:443`). Any variation makes it a cross-origin request.
- Simple vs Preflighted Requests: Requests with custom headers (e.g., `Authorization`) or non-simple Content-Types (e.g., `application/json`) trigger an automatic preflight `OPTIONS` request.
- Preflight Handshake: The browser asks: "Can I send a POST with JSON from origin X?" The server responds with `Access-Control-Allow-Origin`, `Access-Control-Allow-Methods`, and `Access-Control-Allow-Headers`.
- Credentials Restriction (RFC 6454): If `Access-Control-Allow-Credentials: true` is set, `Access-Control-Allow-Origin` CANNOT be the wildcard `*`. It must be an explicit origin.
3. Hands-On Lab Instructions
Inspect the simulated preflight OPTIONS request in the interactive CORS workbench.
Note why the request is preflighted: it sends `Content-Type: application/json` and custom telemetry headers.
Respond to the preflight OPTIONS request with HTTP status 204 No Content and appropriate `Access-Control-Allow-*` headers.
Configure `Access-Control-Allow-Origin` to dynamically validate against an approved origin whitelist instead of reflecting `*`.
Set `Access-Control-Max-Age: 86400` to cache the preflight handshake for 24 hours, reducing API latency.
4. Interactive Lab Workbench
Simulate cross-origin browser fetch calls. Inspect preflight OPTIONS negotiation, origin header verification, and credential constraints.
Server must return 204 No Content on OPTIONS with Access-Control-Allow-Origin: https://app.curious-techie.com and Access-Control-Allow-Credentials: true
5. Diagnostic Comprehension Questions
Why does a request fail when both "Access-Control-Allow-Origin: *" and "Access-Control-Allow-Credentials: true" are returned?
Reveal Answer & Explanation →
✓ Correct Answer: W3C CORS specifications explicitly prohibit wildcard origins when credentials (cookies, HTTP auth) are permitted, to prevent arbitrary malicious sites from harvesting authenticated data.
Under modern browser security standards, if a site allows cookies or credentials to be sent cross-origin, it must explicitly name the trusted origin. Pairing a wildcard "*" with credentials creates a catastrophic CSRF data leakage flaw and is strictly blocked by the browser.
If a CORS preflight error occurs, which entity blocked the response: the server or the browser?
Reveal Answer & Explanation →
✓ Correct Answer: The browser client engine blocked the JavaScript application from reading the response because the server response headers did not grant permission.
CORS is enforced entirely by client web browsers. The server often processes the request and returns data, but the browser security sandbox inspects the CORS response headers and prevents client-side JavaScript from reading the data if permission headers are missing.
6. Progressive Diagnostic Hints
💡 Hint #1▼
💡 Hint #2▼
💡 Hint #3▼
7. Verified Production Solution
API 서버에서 OPTIONS 요청에 대해 204 또는 200 상태코드와 함께 허용 헤더 목록을 정확히 응답하도록 설정합니다.
// Node.js Express / Fastify Production CORS Middleware
const ALLOWED_ORIGINS = new Set([
'https://app.curious-techie.com',
'https://admin.curious-techie.com',
'https://staging.curious-techie.com'
]);
export function corsMiddleware(req, res, next) {
const origin = req.headers.origin;
// Verify origin against strict whitelist
if (origin && ALLOWED_ORIGINS.has(origin)) {
res.setHeader('Access-Control-Allow-Origin', origin);
res.setHeader('Access-Control-Allow-Credentials', 'true');
res.setHeader('Vary', 'Origin'); // Critical for HTTP caching proxies!
}
// Handle Preflight OPTIONS request
if (req.method === 'OPTIONS') {
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With');
res.setHeader('Access-Control-Max-Age', '86400'); // Cache preflight for 24 hours
return res.status(204).end();
}
next();
}- ✓1. Inspect the incoming `Origin` request header sent automatically by the browser.
- ✓2. Validate the origin against an exact whitelist of trusted domains (never blindly reflect `req.headers.origin` without checking).
- ✓3. If valid, set `Access-Control-Allow-Origin` to that specific origin and set `Access-Control-Allow-Credentials: true`.
- ✓4. Set `Vary: Origin` to ensure intermediate reverse proxies and CDNs do not serve a cached CORS response meant for one origin to another.
- ✓5. Intercept `OPTIONS` HTTP requests, attach allowed methods and allowed headers, and respond immediately with HTTP 204 No Content.
8. In-Depth Technical Explanation
"If an application initiates a non-simple cross-origin request without server-side OPTIONS handling, the browser halts request processing during preflight; if the server subsequently emits Access-Control-Allow-Origin: * alongside Allow-Credentials: true, the deterministic outcome is a fatal W3C specification violation in the browser network layer."
Underlying Root Cause Analysis
CORS errors occur because browsers protect users through the Same-Origin Policy. When client JavaScript sends a request to a different domain, protocol, or port, the browser enforces CORS. If the request is complex (such as sending JSON or an Authorization token), the browser executes an automatic preflight OPTIONS request. If the server does not return the proper `Access-Control-Allow-*` headers or misconfigures credential rules, the browser blocks the response.
Production Engineering Best Practices
- →Always set the `Vary: Origin` header when dynamically returning `Access-Control-Allow-Origin` to avoid CDN cache poisoning.
- →Cache preflight checks using `Access-Control-Max-Age: 86400` (Chromium caps this at 7200s, Firefox at 86400s).
- →Never blindly reflect the `Origin` header without whitelist validation, as this completely bypasses the Same-Origin Policy.
Common Pitfalls to Avoid
- ✕Setting `Access-Control-Allow-Origin: *` and then wondering why cookies or auth headers fail to send.
- ✕Writing CORS handlers that only run on successful 200 responses, causing error responses (404, 500) to fail with cryptic CORS errors.
- ✕Forgetting to allow custom client headers in `Access-Control-Allow-Headers`.
관련 기술 생태계 및 다음 학습 단계
관련 기술 아티클
CSP vs CORS: Differences in Browser Defense Mechanisms
Distinguishing outbound resource loading restrictions from inbound server access control.
Troubleshooting: No Access-Control-Allow-Origin Header Present
Diagnose and fix the most common browser cross-origin blocking error with production configs.
관련 기술 질문
Why Does CORS Allow Simple GET Requests Without a Preflight?
Answer: CORS allows simple GET requests without preflight for backwards compatibility with legacy HTML form and image behaviors that predate CORS.
Why Do Browsers Send OPTIONS Preflight Requests?
Answer: Browsers send preflights to verify that older servers not expecting cross-origin calls explicitly permit the method and custom headers before execution.
개발자 표준 규격 및 레퍼런스
다음 학습 단계
CORS Policy & Preflight Handshake Lab
Simulate preflight OPTIONS probes and adjust Access-Control-Allow-* headers inside the browser sandbox.