CORS 정리 (블로그용)

CORS란?

CORS(Cross-Origin Resource Sharing)는 브라우저의 동일 출처 정책(Same-Origin Policy) 때문에 기본적으로 차단되는
다른 출처(Origin)로의 리소스 요청을 “허용할지 말지” 서버가 결정하게 해주는 HTTP 기반 보안 메커니즘이다.

---

출처(Origin)란?

출처(Origin)는 아래 3가지 조합으로 결정된다.

• 프로토콜(scheme) : http / https
• 호스트(host) : 도메인 또는 IP
• 포트(port) : 80, 443, 8080 등

즉, 셋 중 하나라도 다르면 다른 출처다.

---

예시로 정리

✅ 같은 출처

• https://example.com ↔ https://example.com

❌ 다른 출처 (도메인 다름)

• https://www.google.com ↔ https://www.naver.com
  • 호스트가 다르기 때문에 다른 출처

❌ 다른 출처 (포트 다름)

• http://localhost:3000 ↔ http://localhost:8080
  • 포트가 다르기 때문에 다른 출처

❌ 다른 출처 (프로토콜 다름)

• http://example.com ↔ https://example.com
  • 프로토콜이 다르기 때문에 다른 출처

너가 적은 내용 중 “프로토콜이나 포트 번호는 같을 수 있지만 도메인이 다르기 때문에 다른 출처”는 맞고,
더 정확히는 “도메인뿐 아니라 프로토콜/포트도 출처 구성요소”라서 하나만 달라도 다른 출처다.

---

왜 막히는가? (Same-Origin Policy)

브라우저는 기본적으로 보안 때문에 다른 출처로의 요청/응답을 제한한다.

• 악성 사이트가 사용자의 브라우저를 이용해
  • 은행 사이트 API 호출
  • 세션/쿠키를 자동으로 실어 보내
  • 민감 정보 탈취
    같은 시나리오를 방지하기 위함이다.

---

네가 든 예시를 CORS로 설명하면

• UI 애플리케이션: domain1.com
• API 서버: domain2.com

브라우저 입장에서는 서로 다른 출처라서,
domain1.com에서 실행 중인 JS가 domain2.com로 요청을 보내면 브라우저가 “서버가 허용했는지” 확인한다.

• 서버(domain2)가 CORS 허용 헤더를 응답으로 내려주면 ✅ 허용
• 서버가 허용하지 않으면 ❌ 브라우저가 차단

중요한 포인트: 요청이 아예 안 나가는 게 아니라, 브라우저가 응답을 막거나 사전검사(Preflight)를 한다.

---

CORS는 “서버 설정”이다

브라우저가 강제하는 정책이라서,
해결은 보통 API 서버(domain2)에서 허용 설정을 해줘야 한다.

서버가 응답에 아래 같은 헤더를 내려주면 된다.

• Access-Control-Allow-Origin: https://domain1.com
• (필요시) Access-Control-Allow-Credentials: true
• (필요시) Access-Control-Allow-Methods: GET,POST,...
• (필요시) Access-Control-Allow-Headers: ...

---

한 줄 요약

CORS는 “다른 출처 요청을 브라우저가 기본적으로 막는데, 서버가 허용 여부를 HTTP 헤더로 알려주게 만드는 규칙”이다.