🚀 CORS 보안 정책 : 쿠키 차단 문제의 원인과 해결 방법

1. CORS란?

• 교차 출처 리소스 공유 Cross-Origin Resource Sharing의 약자
• 웹 브라우저는 동일 출처 정책(Same-Origin Policy)이라는 보안 규칙을 따름
  • 프로토콜, 도메인, 포트가 모두 같을 때만 자유롭게 요청이 가능한 것.
  • 예를 들면, `http://example.com:80`은
    `http://example.com:80`과는 동일 출처이지만,
    ` http://example.com:8080`과는 포트가 다르기 때문에 다른 출처이고,
    ` http://api.example.com:80`과는 도메인이 다르기 때문에 다른 출처임
• 이처럼 브라우저는 다른 출처로부터의 요청을 막고 있는데,
  브라우저의 보안 정책을 완화하는 방법이 CORS 정책.

2. CORS가 왜 필요할까?

• 프론트엔드와 백엔드를 서로 다른 도메인 또는 포트에서 운영할 때 API 요청이 막히므로,
  서버가 브라우저에게 해당 출처에 접근해도 된다고 알려주는 CORS 방식이 필요함!

3. CORS 동작 방식

1) 단순 요청

• GET, POST, HEAD 같은 간단한 요청은 바로 전송
• 서버가 응답 헤더에 Access-Control-Allow-Origin을 포함해야 허용됨

2) 사전 요청

• PUT, DELETE, 커스텀 헤더와 같은 복잡한 요청은 요청 전에 OPTIONS 요청을 먼저 전송해야 함
• 서버가 이에 대한 CORS 응답을 해야 본 요청을 진행할 수 있음

4. 서버 응답 헤더 예시

• `Access-Control-Allow-Origin: http://localhost:3000`
  • Access-Control-Allow-Origin : 허용할 출처
• `Access-Control-Allow-Methods: GET, POST, PUT, DELETE`
  • Access-Control-Allow-Methods: 허용할 HTTP 메서드
• `Access-Control-Allow-Headers: Content-Type, Authorization`
  • Access-Control-Allow-Headers: 허용할 요청 헤더
• `Access-Control-Allow-Credentials: true`
  • Access-Control-Allow-Credentials: 쿠키/인증 정보 허용 여부

5. Node.js (Express)에서의 설정 방법

const express = require("express");
const cors = require("cors");

const app = express();

// 모든 출처 허용 (개발용)
app.use(cors());

// 특정 출처만 허용 + 쿠키 전달 허용
app.use(cors({
  origin: "http://localhost:3000",
  methods: ["GET", "POST"],
  credentials: true
}));

• 서버가 특정 출처(origin)에 한해 접근 권한을 명시적으로 허용함
• Node.js에서는 cors 미들웨어로 쉽게 설정할 수 있음

6. 왜 CORS 때문에 쿠키 전송이 자주 차단될까? (트러블슈팅🚀)

이 부분은 개발시 실제 나의 트러블슈팅이었음.
개발 효율성과 배포 유연성을 위하여 의도적으로 프론트엔드(3000)와 백엔드(4000)을 분리하여 관리하였는데,
이로 인해 CORS 정책이 쿠키 전송을 차단하는 문제가 발생함.

브라우저에서 쿠키/세션 같은 민감한 인증 정보를 포함하여 다른 출처(origin)에 보낼 때는 조건이 엄격해지는데,
이 중 하나라도 빠지면 브라우저가 보안상의 이유로 쿠키 전송을 차단함

1. 클라이언트 요청시 : fetch 또는 axios 옵션에서 credentials:'include' 또는 withCredentials:true 설정 필요
2. 서버 응답 헤더에 반드시 Access-Control-Allow-Credentials:true 필요
3. Access-Control-Allow-Origin은  * 가 아닌 정확한 출처를 지정해야 함

이렇게 클라이언트와 서버 양쪽에서 위의 조건을 동시에 맞춰주어야 함