Express.js에서 CORS 처리 방법

웹 애플리케이션을 개발하다 보면, 다른 도메인에서 API를 호출해야 하는 상황이 자주 발생합니다. 그러나 웹 보안 정책인 SOP(Same-Origin Policy)에 의해 다른 출처의 리소스에 접근하는 것이 제한됩니다. 이러한 상황에서 CORS (Cross-Origin Resource Sharing)가 등장하며, 이를 통해 웹 브라우저가 안전하게 다른 도메인의 리소스에 접근할 수 있게 해줍니다. 이번 글에서는 CORS에 대한 기본적인 이해와 함께 Express.js에서 CORS를 처리하는 방법에 대해 자세히 알아보겠습니다.

---

CORS란?

CORS (Cross-Origin Resource Sharing)는 한 웹 페이지가 자신의 도메인과 다른 도메인에 있는 리소스에 접근할 수 있도록 허용하는 메커니즘입니다. 이를 통해 특정 도메인에서만 자원을 사용할 수 있도록 제어할 수 있습니다.

예시:

• 사이트 https://example.com이 https://api.example.com에서 데이터를 가져오려고 할 때 CORS 정책이 적용됩니다.

웹 브라우저는 보안상의 이유로 동일 출처 정책(SOP)을 적용하지만, API 서버에서 CORS 정책을 설정하면 다른 출처에서도 안전하게 리소스를 사용할 수 있습니다.

---

Express.js에서 CORS 처리하기

Express.js에서 CORS를 처리하는 방법은 매우 간단합니다. cors 미들웨어를 사용하거나 직접 헤더를 설정하는 두 가지 방법을 살펴보겠습니다.

1. cors 미들웨어를 사용한 설정

cors 미들웨어는 CORS 설정을 쉽게 처리할 수 있는 방법을 제공합니다.

먼저 cors 패키지를 설치합니다:

npm install cors

설치 후, 다음과 같이 Express.js 애플리케이션에 적용할 수 있습니다:

import express from "express";
import cors from "cors";

const app = express();

// 모든 도메인에서의 CORS 요청을 허용
app.use(cors());

app.get("/api/data", (req, res) => {
  res.json({ message: "CORS 요청 허용됨" });
});

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

위의 코드에서는 app.use(cors())를 통해 모든 도메인에서의 요청을 허용하도록 설정했습니다.

2. 특정 도메인에 대해서만 CORS 허용하기

모든 도메인에 대해 허용하는 것은 보안상 위험할 수 있습니다. 특정 도메인에 대해서만 허용하려면 origin 옵션을 사용하면 됩니다.

const corsOptions = {
  origin: "https://example.com", // 이 도메인만 허용
  optionsSuccessStatus: 200, // 일부 브라우저의 CORS 이슈를 해결하기 위한 설정
};

app.use(cors(corsOptions));

위 코드에서는 https://example.com에서의 요청만 허용하도록 설정했습니다. 배열로 여러 도메인을 설정할 수도 있습니다.

const corsOptions = {
  origin: ["https://example.com", "https://anotherdomain.com"], // 여러 도메인 허용
};

app.use(cors(corsOptions));

3. CORS 옵션에 대한 추가 설정

cors 미들웨어는 다양한 옵션을 제공합니다. 그중 몇 가지 중요한 옵션을 살펴보겠습니다.

• methods: 허용할 HTTP 메서드를 지정합니다.

const corsOptions = {
  origin: "https://example.com",
  methods: ["GET", "POST", "PUT", "DELETE"], // 허용할 메서드
};
app.use(cors(corsOptions));

• allowedHeaders: 허용할 헤더를 지정합니다.

const corsOptions = {
  origin: "https://example.com",
  allowedHeaders: ["Content-Type", "Authorization"], // 허용할 헤더
};
app.use(cors(corsOptions));

• credentials: 클라이언트에서 쿠키를 사용할 수 있도록 허용합니다.

const corsOptions = {
  origin: "https://example.com",
  credentials: true, // 쿠키 허용
};
app.use(cors(corsOptions));

---

직접 헤더 설정하기

cors 패키지를 사용하지 않고 직접 헤더를 설정할 수도 있습니다.

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "https://example.com");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  res.header("Access-Control-Allow-Credentials", "true");
  next();
});

이 방법을 사용하면 세부적인 제어가 가능하지만, cors 패키지를 사용하는 것이 더 간편하고 유지보수하기 쉽습니다.

---

CORS Preflight 요청

CORS는 단순 요청(Simple Request)과 사전 요청(Preflight Request)을 구분합니다. Preflight 요청은 클라이언트가 실제 요청을 보내기 전에 서버가 해당 요청을 허용하는지 확인하는 단계입니다.

Preflight 요청은 OPTIONS 메서드를 사용하며, 서버는 이에 대한 적절한 응답을 반환해야 합니다. cors 미들웨어를 사용하면 자동으로 처리되지만, 직접 처리하는 경우 다음과 같이 설정해야 합니다:

app.options("/api/data", (req, res) => {
  res.header("Access-Control-Allow-Origin", "https://example.com");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  res.sendStatus(200);
});

---

CORS 설정 시 주의 사항

• 보안 문제: 모든 도메인(*)에 대해 CORS를 허용하는 것은 보안상 위험할 수 있습니다. 가능한 한 특정 도메인에 대해서만 허용하는 것이 좋습니다.
• 쿠키 사용: credentials: true 옵션을 사용하여 쿠키를 허용할 때는 origin에 *를 사용할 수 없습니다. 반드시 특정 도메인을 지정해야 합니다.

---

마무리

이번 글에서는 Express.js에서 CORS를 처리하는 방법에 대해 알아보았습니다. cors 미들웨어를 사용하면 간단하게 설정할 수 있고, 세부적인 제어가 필요하다면 직접 헤더를 설정할 수도 있습니다. 상황에 맞게 적절한 방법을 선택하여 CORS를 처리하시길 바랍니다.

CORS는 웹 애플리케이션의 보안과 확장성 측면에서 매우 중요한 부분이므로, 이를 올바르게 이해하고 적용하는 것이 중요합니다.