[서버 기초] CORS란? 프론트에서 서버 요청이 막히는 진짜 이유

---

💡 “서버에 요청 보냈는데… 에러가 났어요!”

프론트엔드에서 열심히 fetch로 API를 요청했어요.
그런데 콘솔에 이런 메시지가 뜹니다.

❌ “Access to fetch at 'http://api.example.com' from origin 'http://localhost:3000' has been blocked by CORS policy…”

 

처음 보면 너무 당황스럽죠?
하지만 이건 보안상의 이유로 브라우저가 요청을 막은 것이에요.
오늘은 이 CORS의 개념과 해결 방법을 아주 쉽게 설명해드릴게요!

---

🚧 CORS란?

CORS (Cross-Origin Resource Sharing)는

다른 출처(origin) 간의 요청을 허용할지 말지 결정하는 브라우저의 보안 정책입니다.

 

즉,
“브라우저가 외부 서버에 요청을 보낼 때,
그 요청이 안전한지 확인하는 절차”예요!

---

🌍 ‘다른 출처(Origin)’란?

출처는 도메인 + 프로토콜 + 포트 번호까지 포함된 조합입니다.

📌 예:

• http://localhost:3000
• https://myapp.com:443

이게 조금이라도 다르면 다른 출처로 간주돼요!

요청: http://localhost:3000 → http://api.example.com 
⇒ 다른 출처! (CORS 체크 대상)

---

🔒 왜 CORS가 필요할까?

브라우저는 사용자의 보안을 위해
다른 출처의 요청을 기본적으로 차단해요.

✅ 이유:

• 악성 사이트에서 사용자의 쿠키/정보 탈취 방지
• 민감한 데이터 유출 방지

---

🧪 CORS 에러 상황 예시

fetch('http://api.example.com/data')
  .then(res => res.json())
  .then(data => console.log(data));

이 요청이 localhost에서 실행되면,
api.example.com 서버가 CORS 설정이 안 되어 있다면 브라우저가 요청을 막습니다!

---

✅ 서버에서 CORS를 허용하는 방법

서버가 “이 출처는 허용해도 돼요~”라고 응답해줘야 합니다!

📌 응답 헤더에 아래를 추가해야 해요:

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

Node.js (Express) 예시:

const cors = require('cors');
app.use(cors({ origin: 'http://localhost:3000' }));

 

📌 또는 모든 출처 허용 (개발용):

app.use(cors()); // Access-Control-Allow-Origin: *

---

🛑 CORS는 클라이언트가 아닌 서버 설정!

❗ 중요한 점:

• 클라이언트에서 해결할 수 없음
• 항상 서버에서 허용해줘야 브라우저가 요청을 허용

---

🧠 정리 한마디!

• CORS는 브라우저의 보안 정책
• 서로 다른 출처 간 요청은 서버가 명시적으로 허용해야 작동
• 서버에서 Access-Control-Allow-Origin 헤더를 추가하면 해결!
• 개발 단계에서는 모든 출처 허용(*),
  운영 단계에서는 특정 도메인만 허용하는 것이 보안상 좋습니다.

---

📌 다음 예고: “도커(Docker)란? 서버 환경을 통째로 옮기는 마법”

• 도커는 서버 환경 복사기?
• 이미지, 컨테이너, Dockerfile 핵심 개념 정리
• 개발, 테스트, 배포가 쉬워지는 이유는?

[서버 기초] Docker란? 서버 환경을 통째로 옮기는 마법 같은 기술