CORS (Cross-Origin Resource Sharing)는 웹 애플리케이션에서 다른 도메인으로부터 리소스를 요청할 때 발생하는 보안 정책입니다. 일반적으로, 웹 브라우저는 같은 출처 정책(same-origin policy)에 따라 동일한 도메인에만 요청을 보내도록 제한됩니다. 하지만, CORS를 사용하면 서로 다른 도메인 간의 통신을 허용할 수 있습니다.

이제 서버 측에서 자바스크립트 클라이언트의 CORS 요청을 처리하는 방법에 대해 알아보겠습니다.

1. CORS 요청의 허용

서버는 CORS 요청을 허용하기 위해 응답 헤더에 Access-Control-Allow-Origin이라는 헤더 필드를 추가해야 합니다. 이 헤더 필드의 값으로는 허용되는 도메인을 명시합니다. 예를 들어, 모든 도메인에서의 요청을 허용하려면 “*“를 사용할 수 있습니다.

// 서버 응답 헤더에 Access-Control-Allow-Origin 추가
response.setHeader("Access-Control-Allow-Origin", "*");

2. 추가적인 CORS 관련 헤더

CORS 요청에 대응하기 위해 추가적인 헤더 필드를 사용할 수도 있습니다. 예를 들어, 클라이언트가 인증 정보를 전송할 수 있도록 하려면 Access-Control-Allow-Credentials 헤더 필드를 “true”로 설정해야 합니다.

// 인증 정보 허용을 위해 헤더에 Access-Control-Allow-Credentials 추가
response.setHeader("Access-Control-Allow-Credentials", "true");

3. 특정 HTTP 메서드의 허용

기본적으로, 클라이언트의 CORS 요청은 GET, HEAD, POST 메서드만 허용됩니다. 서버가 다른 메서드를 허용하려면 Access-Control-Allow-Methods라는 헤더 필드를 추가해야 합니다.

// PUT, DELETE 메서드를 허용하기 위해 헤더에 Access-Control-Allow-Methods 추가
response.setHeader("Access-Control-Allow-Methods", "PUT, DELETE");

4. 프리플라이트 요청 처리

CORS 요청에는 프리플라이트(OPTIONS) 요청이 먼저 전송되는데, 이 요청에 대한 응답을 보내야 합니다. 프리플라이트 요청은 서버에서 요청을 처리할 수 있는지 확인하기 위한 사전 검사 요청입니다. 이에 대한 응답은 Access-Control-Allow-* 헤더 필드를 포함해야 합니다.

// 프리플라이트 요청에 대한 응답 설정
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
response.setHeader("Access-Control-Max-Age", "3600");

5. 서버 사이드 프레임워크에서의 처리

위의 예제는 일반적인 자바스크립트 서버에서 CORS 요청을 처리하는 방법을 보여줍니다. 하지만, 실제로는 서버 사이드 프레임워크 또는 라이브러리에서 CORS 설정을 보다 쉽게 처리할 수 있습니다. 예를 들어, Express.js에서는 cors 미들웨어를 사용하여 CORS 요청을 처리할 수 있습니다.

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

const app = express();

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

// 라우터 등록
app.get("/api/data", (req, res) => {
  // 요청 처리
  res.json({ message: "Hello World" });
});

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

마무리

서버 측에서 자바스크립트 클라이언트의 CORS 요청을 처리하는 방법에 대해 알아보았습니다. 서버에서 적절한 CORS 설정을 하는 것은 웹 애플리케이션의 보안과 사용성을 개선하는 중요한 단계입니다. 적절한 CORS 설정을 통해 서로 다른 도메인 간의 통신을 원활하게 할 수 있습니다.