CORS 이해하기: 웹 개발자를 위한 완벽한 가이드 🌐

웹 개발의 세계에서, 다양한 웹사이트 간에 데이터를 주고받는 것은 매우 흔한 일입니다. 하지만 보안상의 이유로, 모든 웹 요청이 자유롭게 이루어지는 것은 아닙니다. 이때 필요한 것이 바로 CORS, 즉 Cross-origin resource sharing입니다. 이 글에서는 CORS가 무엇인지, 왜 중요한지, 그리고 어떻게 사용하는지에 대해 알아보겠습니다.

CORS란 무엇인가요?

CORS는 웹 페이지가 다른 도메인의 리소스를 안전하게 요청할 수 있도록 하는 메커니즘입니다. 기본적으로, 웹 브라우저는 같은 출처 정책(Same-Origin Policy)을 따릅니다. 이 정책은 웹 페이지가 다른 도메인의 리소스를 요청할 때 제한을 두어, 보안 문제를 방지합니다. 하지만 CORS를 사용하면, 서버는 특정 출처에서 자신의 리소스에 접근할 수 있도록 허용할 수 있습니다.

왜 CORS가 중요한가요?

웹 개발을 하다 보면, 다른 도메인의 API를 호출해야 할 때가 많습니다. 예를 들어, 소셜 미디어 피드를 불러오거나, 날씨 정보를 제공하는 서비스의 데이터를 사용할 수도 있습니다. 이런 경우, CORS 없이는 브라우저가 보안상의 이유로 요청을 차단할 것입니다. 따라서, 웹 애플리케이션에서 다양한 리소스를 자유롭게 활용하려면 CORS를 올바르게 설정해야 합니다.

CORS 설정 방법

CORS 설정은 서버 측에서 이루어집니다. 서버는 특정 출처에서 오는 요청에 대해, 어떤 종류의 정보를 공유할 수 있는지를 결정합니다. 여기서는 간단한 예시를 통해, 서버가 CORS를 어떻게 설정할 수 있는지 보여드리겠습니다.

예시: Express.js에서 CORS 설정하기

Express.js는 Node.js의 가장 인기 있는 웹 프레임워크 중 하나입니다. Express 애플리케이션에서 CORS를 설정하는 방법은 다음과 같습니다.

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

const app = express();

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

// 특정 도메인에서의 요청만 허용하고 싶다면, 다음과 같이 설정합니다.
app.use(cors({
  origin: 'https://example.com'
}));

app.get('/data', (req, res) => {
  res.json({ message: '이것은 CORS가 설정된 데이터입니다.' });
});

app.listen(3000, () => {
  console.log('서버가 3000번 포트에서 실행 중입니다.');
});

위 코드에서는 두 가지 방법으로 CORS를 설정했습니다. 첫 번째는 모든 도메인에서 오는 요청을 허용하는 방법이고, 두 번째는 특정 도메인(https://example.com)에서 오는 요청만을 허용하는 방법입니다.

결론

CORS는 웹 개발에서 매우 중요한 개념입니다. 다양한 웹 리소스를 안전하게 활용하기 위해서는 CORS 설정에 대해 잘 이해하고 있어야 합니다. 이 글을 통해 CORS의 기본적인 개념과 설정 방법을 알아보았습니다. 웹 개발을 하면서 CORS와 관련된 문제에 직면했을 때, 이 글이 도움이 되길 바랍니다.