[SOP와 CORS] 브라우저는 왜 내 API를 막을까?

SOP와 CORS 

Access to XMLHttpRequest at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy...

무슨 말인지 모를 긴 오류 메시지. 이건 바로 SOP(Same-Origin Policy, 동일 출처 정책) 와 CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유) 때문에 발생하는 것입니다.

이 글에서는 웹 브라우저의 보안 모델 중 핵심 개념인 SOP와 CORS를 쉽게 설명하고, 실무에서 마주치는 문제들을 어떻게 해결할 수 있는지 알아보겠습니다.

 

 

---

1.  SOP (동일 출처 정책)란?

Same-Origin Policy (SOP) 는 웹 보안을 위한 기본 원칙 중 하나로, 한 출처(origin)에서 로드된 문서나 스크립트는 다른 출처의 리소스에 접근할 수 없다는 정책입니다.

출처(origin)란?

출처는 아래 세 가지 요소의 조합입니다.

• 프로토콜 (protocol): http, https
• 호스트 (host): example.com
• 포트 (port): :80, :3000 등

https://example.com:443  vs  http://example.com:80

→ 이 둘은 출처가 다름 (프로토콜이 다름)

SOP가 막는 것들

요청 시도	허용 여부	이유
https://example.com → https:// example.com	✅	동일 출처
https:// example.com → http:// example.com	❌	프로토콜 다름
https:// example1.com → https:// example2.com	❌	호스트 다름

브라우저는 사용자의 개인정보 보호와 보안을 위해 이 정책을 강제합니다. 예를 들어, 악성 웹사이트가 다른 사이트의 쿠키나 데이터를 훔치지 못하도록 방지합니다.

 

---

2.  CORS란 무엇인가?

그렇다면 출처가 다르면 정말 절대 통신할 수 없을까요? 

답은 “아니요.”입니다. 그걸 가능하게 해주는 것이 바로 CORS (Cross-Origin Resource Sharing) 입니다.

CORS는 무엇을 하는가?

서버가 허락한 경우에 한해, 다른 출처의 리소스를 사용할 수 있도록 하는 HTTP 표준입니다.

즉, 브라우저가 요청을 막기 전에 서버에게 물어보는 겁니다:

“이 도메인에서 온 요청, 받아도 될까요?”

그리고 서버가 응답합니다.

Access-Control-Allow-Origin: http://localhost:3000

 

이 응답이 있다면, 브라우저는 요청을 허용합니다.

 

---

3.  CORS 동작 방식 요약

1. 브라우저가 요청을 보내려 함
2. SOP에 따라 출처가 다르면 사전 요청(preflight) 을 보냄
3. 서버가 CORS 관련 헤더로 응답
4. 브라우저가 확인 후 본 요청을 보내거나 차단

Preflight 요청이란?

일부 요청(GET 외에, PUT, DELETE 등)은 실제 요청 전에 OPTIONS 메서드로 서버에 미리 확인합니다.

OPTIONS /api/data HTTP/1.1
Origin: http://localhost:3000
Access-Control-Request-Method: PUT

 

 

이런 요청에 대해 서버는 다음과 같이 응답해야 합니다.

Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: PUT, GET, POST

 

---

4.  개발 시 CORS 문제 해결 방법

a.  서버에서 CORS 허용

서버가 직접 헤더를 추가해야 합니다.

// 예: Express.js
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

 

b.  프록시 서버 활용 (개발 중에)

프론트엔드 개발 시 CORS 우회를 위해 프록시 설정을 사용하는 경우도 많습니다.

• React (Vite, CRA) : vite.config.js 또는 package.json에 프록시 추가
• Nginx : 리버스 프록시 설정

 

---

5.  정리

개념	설명
SOP	동일 출처가 아니면 브라우저가 리소스 접근을 막는 보안 정책
CORS	서버가 허용한 경우, 다른 출처에서 리소스를 공유할 수 있게 하는 기술

함께 보면 좋은 자료

외부 사이트

• MDN Web Docs - Same-Origin Policy
• MDN Web Docs - Cross-Origin Resource Sharing

블로그 글 :

[CSRF와 XSS] 웹 보안의 핵심

 

---