✅ 압박면접 대응 시리즈 22편: CORS(Cross-Origin Resource Sharing) 원리와 해결 전략

✅ 압박면접 대응 시리즈 22편: CORS(Cross-Origin Resource Sharing) 원리와 해결 전략

압박면접에서 “CORS가 왜 발생하나요?”라는 질문은 거의 모든 프론트엔드 개발자에게 주어집니다.
대부분 “도메인이 달라서요”라고 대답하지만, 면접관은 그다음 질문을 준비하고 있습니다.

“그럼 프리플라이트 요청이 왜 필요한가요?”
“서버에서 어떻게 해결했나요?”
“보안상 왜 제한이 필요한가요?”

이번 글에서는 CORS의 원리, Preflight 구조, 실제 해결 코드, 실무 경험 사례까지 모두 다룹니다.

---

📌 1. CORS란?

**CORS(Cross-Origin Resource Sharing)**는
서로 다른 출처(origin)의 리소스 접근을 제한하는 브라우저 보안 정책입니다.

즉,
“도메인 / 프로토콜 / 포트” 중 하나라도 다르면 교차 출처 요청(Cross-Origin)으로 간주됩니다.

요청 동일 출처 여부

https://a.com → https://a.com/api	✅ Same-Origin
https://a.com → https://b.com/api	❌ Cross-Origin
http://a.com → https://a.com	❌ Cross-Origin

---

📌 2. CORS가 존재하는 이유

• 브라우저의 보안 정책(Same-Origin Policy) 때문
• 악성 스크립트가 다른 사이트의 쿠키나 토큰을 도용하는 것을 방지

📌 중요 포인트:

CORS는 서버 문제이기 전에, 브라우저 보안 정책의 결과물입니다.

---

📌 3. Preflight(사전 요청)의 동작 구조

1. 브라우저가 본 요청 전에 OPTIONS 메서드로 서버에 허가를 요청
2. 서버가 Access-Control-Allow-* 헤더로 응답
3. 허용 시 본 요청(GET, POST, PUT 등) 실행

OPTIONS /api/user HTTP/1.1
Origin: https://frontend.com

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization

📌 면접 포인트:

“Preflight 요청은 서버의 허용 정책을 브라우저가 먼저 검증하기 위한 보안 절차입니다.”

---

📌 4. 서버 측 CORS 해결 방법

✅ Node.js (Express)

import cors from "cors";
app.use(
  cors({
    origin: "https://frontend.com",
    credentials: true,
  })
);

✅ NestJS

app.enableCors({
  origin: "https://frontend.com",
  credentials: true,
});

✅ Spring Boot

@CrossOrigin(origins = "https://frontend.com")

📌 면접 포인트:

“credentials: true 옵션을 사용하면, 반드시 Access-Control-Allow-Origin을 *가 아닌 특정 도메인으로 제한해야 합니다.”

---

📌 5. 프론트엔드 측 주의점

반응형

• Axios 설정 시 withCredentials: true 반드시 명시
• localhost 환경에서는 포트 차이로 인한 CORS가 빈번함

axios.defaults.withCredentials = true;

---

📌 6. 실무 적용 사례

상황:
React 프론트엔드(3000) ↔ NestJS API(9200) 간 쿠키 기반 인증
로그인 후 CORS 오류 발생

원인:
Access-Control-Allow-Credentials: true 미설정

해결:

1. NestJS CORS 설정에 credentials: true 추가
2. Origin을 http://localhost:3000으로 명시
3. Axios에서 withCredentials: true 활성화

📈 결과:

• 쿠키 기반 인증 정상 작동
• CORS Preflight 오류 완전 해결

---

📌 7. 압박면접 예상 질문 & 답변 포인트

• ❓ Q. CORS는 클라이언트 문제인가요, 서버 문제인가요?
  → “CORS는 브라우저 보안 정책에 의해 발생하며,
  서버가 헤더를 통해 접근 허용 정책을 지정해야 합니다.”
• ❓ Q. Access-Control-Allow-Origin: *을 쓰면 안 되는 이유는?
  → “보안상 위험합니다. Credential 요청(쿠키, 인증 토큰)을 허용하지 않기 때문입니다.”
• ❓ Q. Preflight 요청은 왜 필요한가요?
  → “브라우저가 실제 요청 전에 안전성을 검증하기 위한 절차입니다.”

---

📌 8. 면접에서 활용할 한 줄 정리

“CORS는 브라우저의 보안 정책으로 인해 발생하며,
서버가 Access-Control-Allow-Origin 및 Credentials 정책을 올바르게 설정해야 합니다.
NestJS 환경에서 credentials 허용 누락 문제를 해결한 경험이 있습니다.”

---

압박면접,CORS,Preflight,브라우저보안,AccessControlAllowOrigin,NestJS,Axios,SameOrigin,Credentials,웹보안

---