[WEB] CORS (Cross-Origin Resource Sharing), Preflight

CORS (Cross-Origin Resource Sharing)

브라우저가 다른 출처(Origin)의 서버에 요청을 보낼 수 있는지 판단하는 보안 규칙

Origin(출처)이란?

아래 3개가 모두 같아야 같은 Origin입니다.

요소	예시
Protocol	https
Host	snailvoyager.tistory.com
Port	443

CORS가 필요한 이유

브라우저가 아무 사이트나:

• 쿠키 포함 요청
• 사용자 인증 요청
  을 보낼 수 있으면 ❌ CSRF, 정보 탈취 위험

Simple Request (프리플라이트 없음)

조건 (모두 만족해야 함)

• 메서드: GET, HEAD, POST
• 헤더 제한적
• Content-Type:
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

Preflight Request (사전 검사)

본 요청 전에 브라우저가 OPTIONS 요청으로 서버 허용 여부를 확인

언제 발생?

• DELETE, PUT, PATCH
• Authorization 헤더 사용
• Content-Type: application/json
• credentials: include
• 커스텀 헤더 사용

Preflight 동작 흐름

브라우저 → 서버 (OPTIONS)

OPTIONS /api/resource HTTP/1.1
Origin: https://snailvoyager.tistory.com
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: Authorization

서버 응답

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://snailvoyager.tistory.com
Access-Control-Allow-Methods: GET, POST, DELETE, OPTIONS
Access-Control-Allow-Headers: Authorization

credentials 포함 요청

클라이언트

fetch(url, {
  credentials: 'include'
})

서버

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: * ❌
Access-Control-Allow-Origin: https://snailvoyager.tistory.com ✅

 

자주 보는 CORS 에러 정리

에러	원인
No 'Access-Control-Allow-Origin'	서버가 CORS 미허용
Allow-Credentials 오류	credentials + 서버 미설정
Method not allowed	Allow-Methods 누락
Header not allowed	Allow-Headers 누락