CORS란

1. CORS가 대체 뭐길래?

CORS(Cross-Origin Resource Sharing)는 서로 다른 도메인 간 요청을 허용하거나 차단하는 규칙입니다.

동일 출처 정책(Same-Origin Policy)

브라우저는 기본적으로 보안 때문에 **동일 출처(Same-Origin)**가 아닌 요청을 차단합니다. 여기서 동일 출처란, URL의 스키마(프로토콜), 도메인, 포트 번호가 모두 같아야 한다는 뜻입니다.

예시

1. 프론트엔드: http://localhost:3000
2. 백엔드(API 서버): http://api.example.com

이 경우, 두 URL의 도메인이 다르기 때문에 브라우저는 보안상 요청을 차단합니다. 하지만 우리는 보통 이런 요청을 허용해야 하죠. 여기서 CORS가 등장합니다!

---

2. CORS가 필요한 이유

CORS 없이는?

프론트엔드에서 데이터를 요청했더니 이런 오류를 본 적 있으실겁니다.

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

이 메시지는 CORS 정책을 위반했기 때문에 요청이 차단되었다는 뜻입니다.

 

CORS로 해결

CORS는 서버가 **"내가 허락한 도메인만 데이터를 가져가도 돼!"**라고 알려주는 시스템입니다.

서버가 허락을 설정하면, 브라우저는 요청을 허용하게 됩니다.

 

3. CORS는 어떻게 작동할까?

CORS의 작동 방식은 다음과 같이 간단합니다:

1. 클라이언트(프론트엔드)가 서버에 요청을 보냅니다.
   • 브라우저는 이 요청이 다른 도메인이라면, CORS 정책을 확인합니다.
2. 서버가 응답합니다.
   • "네 요청을 허용합니다" 또는 "허용하지 않습니다."
3. 브라우저가 서버의 응답을 확인합니다.
   • 허락받았으면 요청을 성공적으로 처리합니다.

 

CORS 요청의 종류

CORS 요청은 크게 두 가지로 나뉩니다.

1. Simple Request (단순 요청)

• 브라우저가 곧바로 요청을 보냅니다.
• GET, POST, HEAD 메서드만 사용.
• Content-Type이 제한된 값(application/x-www-form-urlencoded, text/plain)이어야 합니다.

2. Preflight Request (사전 요청)

• 브라우저가 요청 전에 OPTIONS 메서드를 사용해 "이 요청을 보내도 되는지" 서버에 확인합니다.
• 요청 메서드가 PUT, DELETE 등 단순하지 않거나, 커스텀 헤더를 사용하는 경우 발생합니다.

 

4. Express로 CORS 해결하기

간단한 CORS 설정

Node.js의 Express를 사용한다면, cors 미들웨어를 추가해 쉽게 CORS를 설정할 수 있습니다.

 

import cors from "cors";

app.use(
  cors({
    origin: "http://localhost:3000", // 허용할 도메인
    methods: ["GET", "POST"], // 허용할 메서드
    credentials: true, // 쿠키 전송 허용
  })
);

CORS 설정 해석

• origin: 요청을 허용할 도메인.
  • http://localhost:3000에서만 요청 허용.
  • "*"로 설정하면 모든 도메인에서 요청 허용(보안상 위험).
• methods: 허용할 HTTP 메서드(GET, POST, PUT, DELETE 등).
• credentials: 인증 정보(쿠키, 세션 등) 전송 허용 여부.

---

5. CORS 설정 예시

프론트엔드에서 요청

React 앱에서 데이터를 가져오려면 이렇게 요청할 수 있습니다:

fetch("http://api.example.com/data", {
  method: "GET",
  credentials: "include", // 쿠키 포함
})
  .then((response) => response.json())
  .then((data) => console.log(data))

6. CORS를 이해하기 위한 비유

CORS를 도서관의 대출 시스템에 비유해 봅시다:

1. 당신(프론트엔드): 도서관(서버)에서 책(데이터)을 빌리고 싶습니다.
2. 도서관 규칙(CORS): "이름과 신분증(출처)을 보여주세요!"
3. 허가된 방문자만 대출 가능: 도서관이 "당신의 출처는 허가되었으니 책을 빌릴 수 있어요!"라고 말합니다.
4. 출처가 허가되지 않음: 도서관이 "죄송합니다, 외부 방문자는 대출할 수 없습니다."라고 응답.

 

7. CORS에서 주의할 점

1. 보안 문제
   • CORS를 설정할 때는 허용할 도메인을 명확히 지정해야 합니다.
   • "*"로 모든 도메인을 허용하는 설정은 절대 사용하지 마세요 (특히 인증 정보가 필요한 경우).
2. HTTPS 환경
   • credentials: true를 사용하려면 HTTPS 환경에서 실행해야 합니다.
   • 서버에서 secure: true 설정 필요.