CORS(Cross-Origin Resource Sharing)란 무엇인가?

웹 개발을 하다 보면, 여러분의 웹사이트가 다른 웹사이트의 자원을 사용해야 할 때가 있습니다. 예를 들어, 여러분의 웹 페이지에서 다른 도메인의 이미지, CSS 파일, 혹은 스크립트를 불러와야 할 수도 있죠. 이럴 때 CORS, 즉 Cross-Origin Resource Sharing이라는 개념이 등장합니다.

간단히 말해서, CORS는 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택된 자원에 접근할 수 있도록 브라우저에 지시하는 메커니즘입니다. "출처"란 도메인, 프로토콜(예: http, https), 그리고 포트를 말합니다. 이 세 가지가 모두 같아야 같은 출처라고 할 수 있습니다.

왜 CORS가 필요할까요?

보안상의 이유로, 브라우저는 기본적으로 스크립트에서 발생하는 교차 출처 HTTP 요청을 제한합니다. 이는 "동일 출처 정책(Same-Origin Policy)"라고 불리는 원칙 때문인데요, 이 정책은 웹 애플리케이션의 보안을 강화하기 위해 존재합니다. 하지만, 때로는 안전하게 다른 출처의 자원을 사용해야 할 필요가 있습니다. 여기서 CORS가 해결책을 제공합니다.

CORS는 어떻게 작동하나요?

간단한 예로, 여러분의 웹 애플리케이션이 example.com에서 호스팅되고 있고, another-domain.com에서 데이터를 불러오려 한다고 가정해 봅시다. 이 경우, another-domain.com의 서버는 다음과 같은 HTTP 헤더를 응답에 포함시켜야 합니다:

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

이 헤더는 example.com에서의 요청만 another-domain.com의 자원에 접근할 수 있도록 허용한다는 것을 의미합니다. 만약 모든 출처에서의 접근을 허용하고 싶다면, 다음과 같이 설정할 수 있습니다:

Access-Control-Allow-Origin: *

실제 예제

웹 개발에서 CORS 설정은 주로 서버 측에서 이루어집니다. 예를 들어, Node.js의 Express 프레임워크를 사용하는 경우, CORS 미들웨어를 사용하여 쉽게 설정할 수 있습니다:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
    origin: 'https://example.com'
}));

app.get('/data', (req, res) => {
    res.json({ message: 'This is CORS-enabled for only example.com.' });
});

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

위 코드는 https://example.com에서 오는 요청에 대해서만 /data 엔드포인트에 접근을 허용합니다.

CORS는 웹 개발에서 자주 마주치는 주제이며, 다양한 웹 애플리케이션에서 필수적으로 다루어야 할 보안 메커니즘 중 하나입니다. 올바른 CORS 설정을 통해, 여러분의 웹 애플리케이션은 보다 안전하게 다른 출처의 자원을 활용할 수 있게 됩니다.