MODOO HUB ← 모두의 툴
Developer · Instrument

CORS 헤더 검사기

CORS 응답 헤더 분석·교차 출처 정책 검사

입력
분석 결과
헤더를 붙여넣고 분석 버튼을 누르세요

CORS Header Checker 사용 가이드

CORS(Cross-Origin Resource Sharing)는 웹 보안의 핵심 메커니즘입니다. 브라우저 개발자 도구 Network 탭에서 응답 헤더를 복사해 붙여넣으면 Access-Control-Allow-Origin, Access-Control-Allow-Methods 등의 값을 즉시 분석하고 요청이 실제로 허용되는지 확인할 수 있습니다. 서버 설정 전 사전 검증이나 CORS 오류 디버깅에 활용하세요.

자주 묻는 질문

Q. CORS란 무엇인가요?

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

Q. Same-Origin Policy란 무엇인가요?

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

Q. Preflight 요청이란 무엇인가요?

A. Preflight 요청은 브라우저가 실제 요청 전에 OPTIONS 메서드로 서버에 보내는 사전 확인 요청입니다. PUT, DELETE, PATCH 메서드나 커스텀 헤더가 포함된 요청에서 발생합니다.

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

A. 쿠키·인증 헤더를 포함한 요청에는 fetch의 credentials:include 옵션을 사용합니다. 서버는 Access-Control-Allow-Origin을 명시적 출처로, Access-Control-Allow-Credentials를 true로 설정해야 합니다.

Q. Allow-Origin: *와 Credentials를 함께 쓸 수 있나요?

A. 아니요. Allow-Origin이 와일드카드(*)이면 Credentials:true를 함께 사용할 수 없습니다. credentials 포함 요청에는 반드시 명시적인 출처를 지정해야 합니다.

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

A. 응답 헤더에 Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers를 추가합니다. Express.js는 cors 미들웨어, Spring은 @CrossOrigin 어노테이션, Nginx는 add_header 지시어를 사용합니다.

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

A. 브라우저 개발자 도구 Network 탭에서 실패한 요청의 Response Headers를 확인합니다. Access-Control-Allow-Origin이 없거나 요청 출처와 다르면 CORS 오류입니다. 헤더를 이 도구에 붙여넣어 즉시 진단하세요.

Q. OPTIONS 메서드는 왜 중요한가요?

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