CORS(Cross-Origin Resource Sharing)란?

CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션이 다른 출처(도메인, 포트, 프로토콜)에서 제공하는 리소스에 접근할 수 있도록 허용하는 보안 기능입니다. 기본적으로 브라우저는 보안상의 이유로, 현재 페이지와 다른 출처에서 리소스를 가져오려 할 때 이를 제한합니다. CORS는 이런 제한을 풀어주는 방법을 제공합니다.

예시를 통해 이해하기

예를 들어, 웹사이트 https://mywebsite.com에서 동작하는 웹 애플리케이션이 있다고 가정해봅시다. 이 웹 애플리케이션이 다른 출처인 https://api.weather.com에서 날씨 데이터를 가져와 사용자에게 보여주려 한다고 해볼게요. 이때, https://mywebsite.com과 https://api.weather.com은 서로 다른 출처이기 때문에, 브라우저는 보안 정책에 의해 이 요청을 기본적으로 차단할 수 있습니다. 바로 이때 CORS가 필요합니다.

CORS가 필요한 이유

CORS는 서버가 특정 출처에서의 요청을 허용할 수 있도록 설정하는 방법입니다. https://api.weather.com 서버에서 CORS를 설정해 https://mywebsite.com에서의 요청을 허용하면, 브라우저는 이 출처에서 온 요청을 받아들입니다. 즉, 서버가 클라이언트에 "이 출처에서 온 요청은 안전하다고 간주한다"라고 알려주는 것이죠.

CORS 설정 방식

서버는 응답 헤더에 Access-Control-Allow-Origin을 추가하여 특정 출처에서 온 요청을 허용합니다. 예를 들어:

Access-Control-Allow-Origin: https://mywebsite.com

이렇게 설정하면 https://mywebsite.com에서 온 요청은 허용되지만, 그 외의 다른 출처에서 온 요청은 차단됩니다.

또는 다음과 같이 설정해 모든 출처에서의 요청을 허용할 수도 있습니다.

Access-Control-Allow-Origin: *

CORS 설정 예시

CORS 설정은 서버에서 제어하는 방식입니다. 예를 들어, Node.js와 Express.js로 서버를 운영하는 경우, CORS 설정은 다음과 같이 할 수 있습니다:

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

const app = express();

// 모든 출처에서의 요청을 허용
app.use(cors());

// 또는 특정 출처만 허용
app.use(cors({
    origin: "https://mywebsite.com"
}));

app.get("/data", (req, res) => {
    res.json({ message: "CORS 설정 완료!" });
});

app.listen(3000, () => console.log("서버가 실행 중입니다."));

이 코드에서 app.use(cors())는 모든 출처에서의 접근을 허용합니다. 또는 특정 출처만 허용하고자 할 경우, origin 옵션에 허용하고자 하는 출처를 지정할 수 있습니다.

정리

CORS는 웹 애플리케이션이 다른 출처의 리소스에 접근할 수 있도록 도와주는 보안 설정입니다. 다른 출처의 데이터를 가져와야 할 때 서버가 특정 출처에 대한 접근을 허용하는 방식으로 작동합니다.