Flutter’s New Web Dev Proxy: A Cleaner Way to Handle APIs (No More CORS Headaches)

Context

Flutter 웹 앱 개발 시 백엔드 API 호출 과정에서 CORS 에러가 발생하는 것이 일반적인 문제였다. 기존에는 백엔드 헤더 수정, Nginx 같은 역프록시 설정, 또는 별도의 임시 방편을 사용해야 했다.

Technical Solution

• web_dev_config.yaml 파일로 로컬 프록시 설정: server 호스트(0.0.0.0), 포트(8000) 정의
• prefix 기반 요청 라우팅: /api/... 요청을 지정된 target_url로 자동 포워딩
• 다중 경로 지원: 단일 설정 파일에서 /api/, /files/ 등 여러 경로에 대한 프록시 규칙 정의
• Flutter 코드에서 상대 경로 사용: http.get(Uri.parse('/api/users')) 형태로 작성하면 내부적으로 target_url/api/users로 변환
• HTTPS 지원 옵션: cert-path, cert-key-path를 통한 로컬 보안 환경 테스트 가능

Key Takeaway

Flutter 웹 개발 프록시는 개발 시 CORS 구성 복잡성을 완전히 제거하고 네이티브 솔루션으로 제공함으로써 개발자 경험을 단순화한다. 외부 도구 의존성을 줄이면서도 동일한 기능을 프레임워크 수준에서 달성하는 설계 패턴이다.