CORS(Cross-Origin Resource Sharing) 이해하기 🌐

웹 개발을 하다 보면, 여러분의 웹사이트가 다른 사이트의 데이터를 필요로 할 때가 있습니다. 예를 들어, 여러분의 웹 애플리케이션에서 날씨 정보를 보여주기 위해 다른 사이트의 API를 호출할 수 있죠. 이럴 때 CORS, 즉 Cross-Origin Resource Sharing의 개념이 중요해집니다.

CORS란 무엇인가요?

간단히 말해서, CORS는 웹 페이지가 다른 도메인의 리소스를 안전하게 요청할 수 있도록 하는 메커니즘입니다. 기본적으로, 웹 브라우저는 보안상의 이유로 스크립트에서 시작된 다른 도메인(출처)으로의 HTTP 요청을 제한합니다. 이를 '동일 출처 정책(Same-Origin Policy)'이라고 합니다. 하지만 CORS를 사용하면, 서버는 특정 출처에서 자신의 리소스에 접근할 수 있도록 허용할 수 있습니다.

예시로 CORS 이해하기

예를 들어, 여러분의 웹사이트가 https://your-website.com이고, 날씨 정보를 제공하는 API가 https://weather-api.com에 있을 때, 여러분의 사이트에서 이 API를 호출하려고 하면 기본적으로 브라우저는 이를 차단합니다. 하지만 https://weather-api.com 서버가 적절한 CORS 헤더를 포함하여 응답하면, 여러분의 웹사이트는 이 API로부터 데이터를 안전하게 받을 수 있습니다.

간단한 코드 스니펫

웹 개발자로서, 여러분이 서버 측에서 CORS를 설정해야 할 경우가 있을 수 있습니다. 예를 들어, Node.js와 Express를 사용하는 경우, 다음과 같이 할 수 있습니다:

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

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

// 특정 도메인에서의 요청만 허용
app.use(cors({
  origin: 'https://your-website.com'
}));

app.get('/data', (req, res) => {
  res.json({ message: '이 데이터는 CORS 정책을 통해 안전하게 전달됩니다.' });
});

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

이 코드 스니펫은 기본적으로 모든 출처에서의 요청을 허용하는 방법과 특정 출처에서만 요청을 허용하는 방법을 보여줍니다.

마무리

CORS는 웹 개발에서 중요한 보안 메커니즘입니다. 올바르게 구성하면 다양한 출처의 리소스를 안전하게 활용할 수 있으며, 애플리케이션의 기능을 확장하는 데 큰 도움이 됩니다. 기억하세요, CORS 설정은 서버 측에서 이루어지며, 여러분의 웹 애플리케이션을 더욱 유연하고 안전하게 만들어 줄 수 있습니다.