개발 중 자주 만나는 CORS 오류와 해결법 정리 (CORS Error in Web Development)

CORS 오류란 무엇인가요?

"CORS(Cross-Origin Resource Sharing) 오류"는 웹 개발 과정에서 프론트엔드와 백엔드가 다른 도메인에서 실행될 때 자주 발생하는 보안 관련 문제입니다. 브라우저는 보안상의 이유로 동일 출처(Same-Origin) 정책을 따릅니다. 즉, 현재 페이지를 로드한 출처(도메인, 프로토콜, 포트)가 아닌 외부 출처로의 요청에 대해서는 제한을 걸게 됩니다.

이러한 제한은 보안 강화를 위한 조치지만, 실제 개발 환경에서는 프론트엔드와 백엔드가 서로 다른 서버에 위치해 있는 경우가 많기 때문에 문제를 일으킬 수 있습니다. 이때 발생하는 것이 바로 "CORS 정책 위반"입니다.

---

언제 발생하나요?

다음과 같은 상황에서 CORS 오류가 발생하는 경우가 많습니다:

• "로컬 개발 중", 프론트엔드는 localhost:3000, 백엔드는 localhost:8000과 같이 포트가 다를 때
• 프론트엔드에서 "외부 API"를 호출할 때 (예: https://api.example.com)
• 배포된 웹사이트가 "서브도메인 또는 CDN"을 사용하면서 다른 출처에서 리소스를 요청할 때

실제 오류 메시지 예시

Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

이 메시지는 브라우저가 응답 헤더에 "Access-Control-Allow-Origin"이 없기 때문에 요청을 차단했다는 의미입니다.

---

해결 방법 정리

1. 서버 측 설정 추가

가장 권장되는 방법은 "백엔드 서버에서 올바른 CORS 헤더를 설정"하는 것입니다.

PHP 예제:

<?php
// CORS 허용 설정
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");

// 요청 처리 코드
?>

Node.js (Express) 예제:

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

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

app.get('/api/data', (req, res) => {
  res.json({ message: 'CORS OK' });
});

app.listen(3000);

주의: "Access-Control-Allow-Origin: *"은 개발에는 유용하지만, 인증 정보를 포함한 요청에는 보안상 위험할 수 있으므로 운영 환경에서는 특정 도메인만 허용하는 방식이 필요합니다.

2. 프록시 서버 활용

개발 도중 CORS 오류를 우회하는 용도로 "프록시 서버"를 설정할 수 있습니다.

예: React 프로젝트에서 vite.config.js

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

이 설정을 통해 /api로 들어오는 요청은 localhost:8000으로 프록시 처리되어 브라우저의 CORS 정책을 회피할 수 있습니다.

3. 브라우저 확장 프로그램 사용 (비추천)

개발 초기 단계에서는 "CORS 관련 브라우저 확장 프로그램"을 사용할 수 있습니다. 예를 들어 Chrome의 "Allow CORS" 확장 기능은 임시적으로 요청을 허용해줍니다. 하지만 "운영 배포 환경"에서는 절대 사용해서는 안 됩니다. 사용자의 브라우저에 의존하는 방식이기 때문에 신뢰성이 없습니다.

---

개발과 운영 단계의 차이

• "개발 단계": 프록시 설정이나 로컬 CORS 우회 도구를 활용해 빠르게 개발을 이어갈 수 있음
• "운영 단계": 반드시 백엔드 서버에서 정확한 CORS 설정을 적용해야 하며, 보안 상 민감한 데이터가 포함된다면 도메인 단위로 세밀하게 허용 범위를 지정해야 합니다

---

마무리 및 추천 학습

CORS 오류는 많은 초보 개발자가 처음 부딪히는 웹 보안 개념 중 하나입니다. 하지만 서버 설정의 원리를 이해하고 적절히 대응하는 법을 익히면 해결은 그리 어렵지 않습니다. 무엇보다 중요한 것은 "브라우저 보안 정책"의 의도를 이해하고 그에 맞춰 개발 방식을 조정하는 능력입니다.

 

추천 학습 자료:

• MDN - HTTP CORS 개념 정리
• 웹 보안 입문자를 위한 강의