Question 1

CORS란 무엇인가요?

Accepted Answer

CORS(Cross-Origin Resource Sharing)는 브라우저가 한 출처(Origin)에서 다른 출처의 리소스에 접근할 수 있도록 허용하는 HTTP 헤더 기반 메커니즘입니다. 서버가 특정 출처를 허용한다고 명시해야 브라우저가 응답을 허용합니다.

Question 2

Same-Origin Policy란 무엇인가요?

Accepted Answer

동일 출처 정책(Same-Origin Policy)은 브라우저 보안 정책으로, 스크립트가 자신의 출처와 다른 출처의 리소스에 접근하는 것을 기본적으로 차단합니다. 출처는 프로토콜·호스트·포트의 조합으로 결정됩니다.

Question 3

Preflight 요청이란 무엇인가요?

Accepted Answer

Preflight 요청은 브라우저가 실제 요청 전에 OPTIONS 메서드로 서버에 보내는 사전 확인 요청입니다. PUT, DELETE, PATCH 메서드나 커스텀 헤더가 포함된 요청에서 발생합니다. 서버는 Access-Control-Allow-Methods와 Access-Control-Allow-Headers로 응답해야 합니다.

Question 4

credentials 포함 요청은 어떻게 처리하나요?

Accepted Answer

쿠키·인증 헤더를 포함한 요청에는 fetch의 credentials:include 옵션을 사용합니다. 이때 서버는 Access-Control-Allow-Origin을 와일드카드(*)가 아닌 명시적 출처로, Access-Control-Allow-Credentials를 true로 설정해야 합니다.

Question 5

Access-Control-Allow-Origin: * 와 credentials를 함께 사용할 수 있나요?

Accepted Answer

아니요. 브라우저 보안 정책상 Access-Control-Allow-Origin이 *이면 Access-Control-Allow-Credentials: true를 함께 사용할 수 없습니다. credentials를 포함한 요청에는 반드시 명시적인 출처를 지정해야 합니다.

Question 6

서버에서 CORS를 어떻게 설정하나요?

Accepted Answer

서버에서 응답 헤더에 Access-Control-Allow-Origin(허용 출처), Access-Control-Allow-Methods(허용 메서드), Access-Control-Allow-Headers(허용 헤더)를 추가합니다. Express.js의 경우 cors 미들웨어, Spring은 @CrossOrigin 어노테이션, Nginx는 add_header 지시어를 사용합니다.

Question 7

CORS 에러를 어떻게 디버그하나요?

Accepted Answer

브라우저 개발자 도구의 Network 탭에서 실패한 요청을 선택하고 Response Headers를 확인합니다. Access-Control-Allow-Origin 헤더가 없거나 요청 출처와 다르면 CORS 오류입니다. 이 도구에 헤더를 붙여넣으면 문제를 즉시 진단할 수 있습니다.

Question 8

OPTIONS 메서드는 왜 필요한가요?

Accepted Answer

OPTIONS 메서드는 Preflight 요청에 사용됩니다. 서버가 OPTIONS 요청에 올바른 CORS 헤더로 응답하지 않으면 실제 요청이 차단됩니다. 서버 라우팅에서 OPTIONS 메서드를 명시적으로 처리하고 200 또는 204 상태코드로 응답해야 합니다.

CORS 헤더 검사기