React에서 Cross-Origin Resource Sharing(CORS) 이해하기

 

React 애플리케이션을 개발하면서 API 요청이 실패하거나, 브라우저 콘솔에 "CORS" 관련 에러가 표시된 경험이 있을 수 있습니다. 이러한 문제는 주로 Cross-Origin Resource Sharing(CORS) 정책으로 인해 발생합니다. 이 글에서는 CORS의 기본 개념부터 React에서 이를 해결하는 방법까지 단계별로 알아보겠습니다.

---

CORS란 무엇인가요?

**CORS(Cross-Origin Resource Sharing)**는 웹 브라우저가 다른 도메인(Origin)의 리소스에 접근하려 할 때 이를 제어하는 보안 메커니즘입니다. 브라우저는 보안상의 이유로 동일 출처 정책(Same-Origin Policy)을 기본으로 따르며, 이를 통해 크로스 도메인 요청을 제한합니다.

CORS는 서버에서 특정 출처의 요청만 허용하도록 설정할 수 있는 HTTP 헤더를 통해 이러한 제한을 완화합니다. 다음은 주요 CORS 헤더입니다:

• Access-Control-Allow-Origin: 허용할 출처를 명시합니다.
• Access-Control-Allow-Methods: 허용할 HTTP 메서드(GET, POST 등)를 지정합니다.
• Access-Control-Allow-Headers: 요청 시 사용할 수 있는 커스텀 헤더를 지정합니다.

---

동일 출처 정책(Same-Origin Policy)이란?

**동일 출처 정책(SOP)**은 웹 브라우저에서 출처가 다른 리소스 간의 상호작용을 제한하는 기본 보안 규칙입니다. 여기서 "출처"는 다음 세 가지 요소로 구성됩니다:

• 프로토콜 (예: http, https)
• 호스트 (예: example.com)
• 포트 (예: :3000)

만약 두 리소스의 프로토콜, 호스트, 포트가 모두 동일하다면 같은 출처로 간주됩니다. 그렇지 않을 경우 "교차 출처 요청"이 됩니다.

예를 들어:

• https://example.com 과 https://api.example.com -> 다른 출처
• http://example.com 과 https://example.com -> 다른 출처
• https://example.com:3000 과 https://example.com:4000 -> 다른 출처

---

React 애플리케이션에서의 CORS 문제

React 애플리케이션은 보통 백엔드 API와 통신합니다. 개발 중에는 React 개발 서버(예: http://localhost:3000)와 API 서버(예: http://localhost:5000)가 다른 출처를 가지는 경우가 많습니다. 이때 브라우저는 동일 출처 정책에 따라 요청을 차단하며, 아래와 같은 에러를 발생시킬 수 있습니다:

Access to XMLHttpRequest at 'http://localhost:5000/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy.

이를 해결하려면 백엔드 서버가 React 애플리케이션의 출처를 허용하도록 CORS 설정을 추가해야 합니다.

---

백엔드에서 CORS 설정하기

CORS 문제를 해결하려면 서버에서 CORS 헤더를 설정해야 합니다. 아래는 인기 있는 백엔드 프레임워크를 사용한 예제입니다.

1. Express.js

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

const app = express();

// 모든 출처 허용
app.use(cors());

// 특정 출처만 허용
app.use(cors({
  origin: 'http://localhost:3000',
}));

app.get('/api/data', (req, res) => {
  res.json({ message: 'CORS 설정 완료!' });
});

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

2. Django

Django에서는 django-cors-headers 패키지를 사용합니다:

pip install django-cors-headers

settings.py 파일에 다음 설정을 추가합니다:

INSTALLED_APPS += [
    'corsheaders',
]

MIDDLEWARE.insert(0, 'corsheaders.middleware.CorsMiddleware')

# 모든 출처 허용
CORS_ALLOW_ALL_ORIGINS = True

# 특정 출처만 허용
CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000',
]

---

프론트엔드에서의 해결 방법

만약 백엔드 설정을 변경할 수 없는 상황이라면, React 애플리케이션에서 다음과 같은 방법으로 임시 해결할 수 있습니다.

1. 프록시 서버 설정

React 개발 서버는 프록시를 통해 CORS 문제를 우회할 수 있습니다. package.json 파일에 다음 설정을 추가하세요:

{
  "proxy": "http://localhost:5000"
}

React 애플리케이션에서 요청할 때는 전체 URL 대신 상대 경로를 사용하면 됩니다:

fetch('/api/data')
  .then((response) => response.json())
  .then((data) => console.log(data));

2. 브라우저 확장 프로그램 사용

개발 환경에서만 사용 가능한 방법으로, CORS Unblock과 같은 브라우저 확장 프로그램을 설치하여 CORS 정책을 일시적으로 비활성화할 수 있습니다.

---

CORS 사전 요청(Preflight Request) 이해

브라우저는 "안전하지 않은" 요청(예: POST, PUT, DELETE 등)을 하기 전에 OPTIONS 메서드를 사용해 서버에 사전 요청을 보냅니다. 이를 "Preflight Request"라고 합니다. 만약 서버가 이 요청에 적절히 응답하지 않으면 브라우저는 실제 요청을 보내지 않습니다.

Preflight Request를 처리하기 위해 서버는 다음 헤더를 포함한 응답을 반환해야 합니다:

Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type

---

결론

CORS는 브라우저 보안 정책의 중요한 부분으로, 이를 이해하고 적절히 설정하는 것은 React와 같은 프론트엔드 애플리케이션에서 필수적입니다. 백엔드에서 CORS를 설정하거나, 프록시 서버를 활용해 문제를 해결할 수 있습니다. 이번 글에서 다룬 내용을 참고해 여러분의 프로젝트에서 CORS 문제를 효과적으로 처리해 보세요!