← 목록

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

작성: 2025년 12월 23일읽기: 약 4분
GPTLLM

웹 개발의 세계에서, 다양한 웹 사이트 간의 자원 공유는 필수적입니다. 하지만 보안상의 이유로, 모든 웹 요청이 자유롭게 허용되지는 않습니다. 이때 중요한 역할을 하는 것이 바로 CORS(Cross-Origin Resource Sharing) 입니다. CORS는 웹 페이지가 다른 도메인의 자원을 안전하게 요청할 수 있도록 하는 메커니즘입니다. 이 가이드에서는 CORS의 기본 개념과 웹 개발자가 알아야 할 중요한 사항들을 쉽게 설명해 드리겠습니다.

CORS란 무엇인가요?

간단히 말해, CORS는 한 출처(origin)에서 실행 중인 웹 애플리케이션이 다른 출처의 선택된 자원에 접근할 수 있도록 브라우저에 지시하는 메커니즘입니다. 출처란 도메인(예: example.com), 프로토콜(예: HTTP, HTTPS), 그리고 포트(예: 80, 443)의 조합을 의미합니다. 이 정책은 웹의 보안 모델인 동일 출처 정책(Same-Origin Policy)을 보완합니다.

왜 CORS가 필요한가요?

웹 애플리케이션은 점점 더 다양한 웹 서비스와 데이터를 통합하고 있습니다. 예를 들어, 다른 도메인에서 제공하는 이미지, 폰트, CSS 파일 등을 사용할 수 있어야 합니다. 하지만, 동일 출처 정책은 기본적으로 이러한 자원의 교차 출처 요청을 제한합니다. CORS는 이러한 제한을 안전하게 우회할 수 있는 방법을 제공합니다.

CORS 작동 방식

CORS는 HTTP 헤더를 사용하여 작동합니다. 웹 애플리케이션이 다른 출처의 자원에 접근하려고 할 때, 브라우저는 자동으로 Origin 헤더를 요청에 추가합니다. 이 요청은 "사전 요청(preflight request)"이라고 불리며, 실제 요청을 보내기 전에 서버가 요청을 수락할지를 확인합니다.

서버 측에서는 이러한 요청을 처리하고, 접근을 허용하려면 Access-Control-Allow-Origin 헤더에 특정 출처를 명시해 응답해야 합니다.

간단한 예제

웹 개발에서 CORS를 구현하는 방법을 보여주는 간단한 코드 스니펫입니다.

서버 측 코드 (Node.js 예제)

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

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

app.get('/data', (req, res) => {
  res.json({ message: '이 데이터는 다른 출처에서도 접근 가능합니다!' });
});

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

클라이언트 측 코드 (HTML & JavaScript)

<!DOCTYPE html>
<html>
<body>
  <script>
    fetch('http://localhost:3000/data')
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error('에러:', error));
  </script>
</body>
</html>

이 예제에서, 서버는 모든 출처에서 오는 요청을 허용합니다. 클라이언트 측 코드는 fetch API를 사용하여 서버에서 데이터를 요청하고, 콘솔에 결과를 출력합니다.

결론

CORS는 웹 개발에서 중요한 개념입니다. 다양한 출처의 자원을 안전하게 사용하려면 CORS를 올바르게 이해하고 구현하는 것이 필수적입니다. 이 가이드가 CORS의 기본을 이해하는 데 도움이 되었기를 바랍니다. Happy coding! 🚀