Flask CORS 설정과 프런트 분리 개발 완벽 가이드

🔗 CORS란 무엇이며 왜 필요한가

CORS는 Cross-Origin Resource Sharing의 약자로, 브라우저가 다른 도메인에 있는 자원에 접근할 때 보안을 강화하기 위해 적용되는 정책입니다.
즉, 동일 출처 정책(Same-Origin Policy) 때문에 발생하는 제약을 완화하기 위해 만들어진 메커니즘이라고 볼 수 있습니다.
예를 들어, 백엔드가 http://api.example.com에서 실행되고 프런트엔드가 http://localhost:3000에서 실행된다면, 브라우저는 이를 서로 다른 출처로 인식하고 기본적으로 요청을 차단합니다.

이런 상황에서 프런트엔드 애플리케이션이 정상적으로 API 데이터를 받아오기 위해서는 백엔드 서버에서 특정 출처를 허용해 주는 CORS 설정이 필요합니다.
만약 이를 설정하지 않으면 개발자는 브라우저 콘솔에서 흔히 볼 수 있는 “Access-Control-Allow-Origin” 관련 에러를 마주하게 됩니다.

🌐 동일 출처 정책과의 관계

동일 출처 정책은 브라우저 보안의 핵심 규칙으로, 스크립트가 다른 도메인이나 포트, 프로토콜에서 데이터를 가져오는 것을 제한합니다.
이 정책이 없다면 악성 웹사이트가 사용자의 세션이나 쿠키에 접근할 수 있는 보안 위협이 발생할 수 있습니다.
따라서 CORS는 단순한 편의 기능이 아니라, 보안과 개발 편의성을 균형 있게 조율하는 장치라고 이해하는 것이 중요합니다.

• 🔒CORS는 브라우저에서만 적용되며 서버 간 통신에는 해당되지 않습니다
• 📡백엔드에서 허용된 도메인만 API 접근이 가능하도록 제어합니다
• ⚙️개발 환경과 배포 환경에 따라 CORS 설정을 달리하는 것이 안전합니다

🛠️ Flask에서 Flask-CORS 설치와 기본 사용법

Flask에서 CORS 문제를 해결하기 위해 가장 널리 사용되는 라이브러리가 바로 Flask-CORS입니다.
이 패키지를 설치하면 복잡한 헤더 설정을 직접 작성할 필요 없이 간단한 코드 몇 줄만으로 CORS 제어가 가능합니다.
Python 패키지 관리자인 pip을 통해 쉽게 설치할 수 있으며, 설치 후 Flask 애플리케이션에 몇 줄 추가하는 것만으로 기본 동작을 구현할 수 있습니다.

📦 설치 방법

pip install flask-cors

설치가 완료되면 Flask 애플리케이션에 import 하여 바로 사용할 수 있습니다.
가장 기본적인 방식은 Flask 객체에 직접 CORS를 연결하는 것입니다.

⚡ 기본 적용 예제

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/api/data")
def get_data():
    return {"message": "CORS is working!"}

if __name__ == "__main__":
    app.run(debug=True)

위와 같이 설정하면 모든 라우트에서 모든 출처의 요청을 허용하게 됩니다.
개발 환경에서는 빠르고 편리하게 테스트할 수 있지만, 실제 서비스 환경에서는 보안상 위험할 수 있으므로 특정 도메인만 허용하는 방식으로 세부 설정을 적용하는 것이 좋습니다.

⚙️ 보안 고려사항과 안전한 CORS 설정

CORS 설정을 할 때 가장 흔히 저지르는 실수는 모든 출처(*)를 허용하는 방식입니다.
이 방법은 개발 과정에서는 편리하지만, 운영 환경에서는 심각한 보안 취약점을 초래할 수 있습니다.
특히 인증 정보가 포함된 요청이나 민감한 사용자 데이터를 다루는 API에서는 반드시 안전한 접근 제어가 필요합니다.

🔒 안전한 도메인 지정 방법

Flask-CORS에서는 허용할 도메인을 명시적으로 등록할 수 있습니다.
예를 들어, 실제 서비스되는 프런트엔드 도메인만 등록하면 다른 사이트에서 API를 호출하더라도 브라우저에서 차단하게 됩니다.

from flask_cors import CORS

CORS(app, resources={
    r"/api/*": {"origins": "https://myfrontend.com"}
})

위 코드에서는 /api/로 시작하는 모든 경로에 대해 https://myfrontend.com에서 오는 요청만 허용하도록 설정했습니다.
이처럼 특정 경로나 특정 출처를 지정하는 것이 보안적으로 훨씬 안전합니다.

🛡️ 인증과 CORS의 관계

JWT 토큰이나 세션 기반 인증을 사용할 경우, 브라우저의 preflight 요청(OPTIONS)에서 인증 헤더가 포함되지 않는 문제를 겪을 수 있습니다.
이럴 때는 CORS 설정에서 supports_credentials=True 옵션을 사용해 인증 정보를 포함한 요청을 허용해야 합니다.

CORS(app, supports_credentials=True)

• ✅운영 환경에서는 특정 도메인만 허용하도록 설정하기
• 🔑JWT, 세션 등 인증 방식을 고려한 CORS 정책 병행
• 🚫무분별한 와일드카드(*) 사용 금지

🔌 프런트엔드와 백엔드 분리 개발 환경 구축

최근 웹 애플리케이션 개발에서는 프런트엔드와 백엔드를 명확히 분리하는 구조가 표준처럼 자리 잡았습니다.
백엔드는 API 서버 역할을 맡고, 프런트엔드는 React, Vue, Angular 같은 프레임워크로 사용자 인터페이스를 담당하는 방식입니다.
이 과정에서 두 애플리케이션이 서로 다른 도메인 또는 포트에서 실행되기 때문에 CORS 설정은 필수적입니다.

🖥️ 로컬 개발 환경에서의 분리

개발 단계에서는 보통 Flask 서버는 http://127.0.0.1:5000에서 실행되고, React 프런트엔드는 http://localhost:3000에서 실행됩니다.
이 경우 기본적으로 서로 다른 출처이기 때문에 API 호출 시 CORS 에러가 발생합니다.
따라서 Flask 백엔드에서 해당 포트를 허용하는 설정을 반드시 추가해야 합니다.

💬 개발 환경에서는 여러 도메인을 동시에 허용할 수 있지만, 운영 환경에서는 반드시 제한된 출처만 설정하는 것이 안전합니다.

🌍 운영 환경에서의 분리

운영 환경에서는 API 서버와 프런트엔드 애플리케이션이 각각 독립적인 도메인을 가지는 경우가 많습니다.
예를 들어 api.myapp.com과 myapp.com처럼 분리됩니다.
이 경우 백엔드 CORS 설정에 프런트엔드 도메인을 등록하고, HTTPS 인증서 설정까지 함께 고려해야 안전하게 서비스할 수 있습니다.

💡 실제 프로젝트에서 적용하는 사례

이제까지 CORS의 개념과 Flask에서의 설정 방법을 살펴봤다면, 실제 프로젝트에서는 어떻게 적용되는지 확인하는 것이 중요합니다.
스타트업부터 대규모 서비스까지 다양한 사례에서 Flask-CORS는 유연하게 사용되고 있으며, 프런트엔드와 백엔드를 분리한 구조에서는 특히 필수적인 역할을 합니다.

📊 스타트업 MVP 단계

스타트업이 초기 MVP를 개발할 때는 빠른 개발 속도가 핵심입니다.
보통은 React, Vue 같은 프런트엔드 프레임워크와 Flask 백엔드를 분리해서 개발합니다.
이 경우 Flask-CORS를 단순히 CORS(app) 형태로 적용해 모든 출처를 허용한 뒤, 빠르게 피드백을 받는 방식이 흔히 사용됩니다.
다만 운영 단계로 넘어가기 전에는 반드시 특정 도메인만 허용하는 방식으로 보안 강화를 진행해야 합니다.

🏢 중견 기업의 사내 시스템

사내 ERP나 그룹웨어 같은 시스템에서도 CORS 설정은 자주 등장합니다.
특히 내부망과 외부망을 동시에 지원하는 경우, resources 옵션으로 세부적인 API 엔드포인트별 CORS 제어를 적용해 효율적으로 관리합니다.

CORS(app, resources={
    r"/auth/*": {"origins": "https://intranet.company.com"},
    r"/public/*": {"origins": "*"}
})

위 예시처럼 인증 관련 엔드포인트는 내부 도메인에서만 접근 가능하게 하고, 공용 API는 모든 출처에 열어두는 방식이 효율적입니다.

🌐 글로벌 서비스 운영

전 세계에 서비스를 제공하는 글로벌 플랫폼에서는 지역별 프런트엔드 도메인을 운영하는 경우가 많습니다.
예를 들어 us.myapp.com, eu.myapp.com 같은 도메인입니다.
이럴 경우 CORS 설정에서 여러 개의 origin을 배열로 등록하여 관리합니다.

CORS(app, resources={
    r"/api/*": {"origins": ["https://us.myapp.com", "https://eu.myapp.com"]}
})

❓ 자주 묻는 질문 (FAQ)