CORS 설명

Cross-Origin Resource Sharing 완전 가이드 — 작동 방식, 모든 헤더 설명, 일반적인 오류와 해결 방법.

개요

CORS란 무엇인가요?

교차 출처 리소스 공유(CORS)는 서버가 자신의 출처 이외의 모든 출처(도메인, 스킴 또는 포트)에서 브라우저가 리소스 로드를 허용해야 하는 출처를 표시할 수 있는 HTTP 헤더 기반 메커니즘입니다. 브라우저는 기본적으로 동일 출처 정책을 적용하여 페이지를 제공한 출처와 다른 출처로의 요청을 차단합니다.

동일 출처 정책

두 URL이 동일한 스킴(http/https), 호스트, 포트를 공유하면 동일한 출처를 가집니다. 예를 들어, https://app.example.com과 https://api.example.com은 호스트가 다르기 때문에 다른 출처입니다. 동일 출처 정책은 악의적인 사이트가 다른 사이트의 민감한 데이터를 읽는 것을 방지합니다. CORS는 이 제한을 통제된 방식으로 완화하는 메커니즘입니다.

단순 요청 vs. 프리플라이트

"단순 요청"은 GET, HEAD 또는 POST를 CORS 안전 목록의 헤더만으로 사용하며 프리플라이트를 트리거하지 않습니다. 그 외 모든 교차 출처 요청—PUT이나 DELETE 같은 메서드를 사용하거나 Authorization 같은 헤더를 포함하는 요청—은 프리플라이트를 트리거합니다. 브라우저는 실제 요청을 보내기 전에 먼저 OPTIONS 요청을 보내 서버에 권한을 요청합니다.

CORS 작동 방식

단순 요청

브라우저

GET /api/data
Origin: https://app.example.com

↓

서버

200 OK
Access-Control-Allow-Origin: *

↓

✓ JS에 응답 공유

프리플라이트 요청

브라우저

OPTIONS /api/data
Access-Control-Request-Method: DELETE

↓

서버

204 No Content
Access-Control-Allow-Methods: DELETE

↓

브라우저

DELETE /api/data
Origin: https://app.example.com

↓

✓ JS에 응답 공유

CORS 헤더

10개 중 10개 표시

일반적인 오류

8개 중 8개 표시

RequestDock에서 사용해 보기

실제 HTTP 요청을 보내고 응답을 검사하세요 — 브라우저에서 바로.

RequestDock 열기

CORS 설명

개요

CORS란 무엇인가요?

동일 출처 정책

단순 요청 vs. 프리플라이트

CORS 작동 방식

단순 요청

프리플라이트 요청

CORS 헤더

일반적인 오류

관련 가이드

HTTP 상태 코드

HTTP 헤더

HTTP 메서드

MIME 유형

RequestDock에서 사용해 보기

개요

CORS란 무엇인가요?

동일 출처 정책

단순 요청 vs. 프리플라이트

CORS 작동 방식

단순 요청

프리플라이트 요청

CORS 헤더

Access-Control-Allow-Origin응답필수

Access-Control-Allow-Methods응답필수

Access-Control-Allow-Headers응답필수

Access-Control-Allow-Credentials응답선택

Access-Control-Expose-Headers응답선택

Access-Control-Max-Age응답선택

Access-Control-Request-Method요청필수

Access-Control-Request-Headers요청선택

Origin요청필수

Vary응답선택

일반적인 오류

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header must not be the wildcard '*' when the request's credentials mode is 'include'.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: Method DELETE is not allowed by Access-Control-Allow-Methods in preflight response.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Access to fetch at 'https://api.example.com/data' (redirected from 'https://api.example.com/old') from origin 'https://app.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.

Refused to get unsafe header 'X-Request-Id'

관련 가이드

HTTP 상태 코드

HTTP 헤더

HTTP 메서드

MIME 유형

RequestDock에서 사용해 보기