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

작성: 2024년 11월 25일읽기: 약 4분

웹 개발을 하다 보면 다양한 도메인 간의 데이터를 주고받을 필요가 있습니다. 그런데 이 과정에서 보안 문제로 인해 웹 브라우저가 이러한 요청을 차단하는 경우가 많습니다. 여기서 우리가 주목해야 할 개념이 바로 Cross-Origin Resource Sharing (CORS) 입니다. 이 가이드에서는 CORS의 개념을 쉽게 풀어 설명하고, 웹 개발자가 알아야 할 핵심 포인트를 다루겠습니다.

CORS란 무엇인가요?

CORS는 다른 도메인으로부터 리소스를 안전하게 요청할 수 있도록 하는 메커니즘입니다. 웹은 기본적으로 동일 출처 정책(Same-Origin Policy)을 따르기 때문에, 다른 출처의 리소스를 요청하는 것은 제한됩니다. 하지만 CORS를 사용하면 서버가 특정 출처의 요청을 허용한다는 신호를 브라우저에 보낼 수 있습니다.

CORS는 어떻게 작동하나요?

웹 페이지에서 다른 도메인의 리소스를 요청할 때, 브라우저는 자동으로 요청에 Origin 헤더를 추가합니다. 이 헤더는 요청이 시작된 출처를 나타냅니다. 서버는 이 요청을 받고, Access-Control-Allow-Origin 헤더를 응답에 추가하여 이 출처의 요청을 허용할지 결정합니다.

예를 들어, http://example.com에서 http://api.example.com의 데이터를 요청한다고 가정해 봅시다. 서버가 이 요청을 허용하려면 응답에 다음과 같은 헤더를 포함해야 합니다.

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

또는 서버가 모든 출처의 요청을 허용하려면 아래와 같이 설정할 수 있습니다.

Access-Control-Allow-Origin: *

간단한 요청과 사전 요청

CORS 요청은 크게 두 가지 유형으로 나뉩니다: **간단한 요청(Simple Requests)**과 사전 요청(Preflight Requests).

간단한 요청은 특정 조건을 만족하는 요청으로, 브라우저가 추가적인 CORS 체크 없이 바로 요청을 전송합니다. 이러한 요청은 일반적으로 GET, POST, HEAD 메소드를 사용하며, 특정 헤더만 포함합니다.
사전 요청은 서버에 실제 요청을 보내기 전에 브라우저가 먼저 OPTIONS 메소드를 사용하여 요청을 보낼 수 있는지 확인하는 요청입니다. 이는 주로 커스텀 헤더를 사용하거나, PUT, DELETE 같은 메소드를 사용할 때 발생합니다.

CORS 해결 방법

CORS 문제를 해결하기 위해서는 서버 설정을 조정해야 합니다. 여기서는 Node.js의 Express 프레임워크를 사용하는 예를 들어 보겠습니다.

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

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

// 특정 도메인의 요청만 허용하려면
app.use(cors({
  origin: 'http://example.com'
}));

app.get('/data', (req, res) => {
  res.json({ message: 'Hello World' });
});

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

위 예제에서는 cors 미들웨어를 사용하여 CORS 정책을 쉽게 설정할 수 있습니다. 모든 요청을 허용하거나, 특정 도메인의 요청만 허용하는 방법을 선택할 수 있습니다.

결론

CORS는 웹 개발에서 흔히 마주치는 문제 중 하나이며, 이를 이해하고 올바르게 처리하는 것은 중요합니다. 이 가이드를 통해 CORS의 기본 개념과 작동 방식, 그리고 간단한 해결 방법에 대해 알아보았습니다. 웹 개발을 진행하면서 CORS 문제에 부딪히게 되면, 이 가이드가 유용한 참고자료가 되길 바랍니다.