🚀 네이버 뉴스 API 프록시 이슈 해결 (배포 환경)
1. 문제 상황 발생
🔗 DUGOUT - 네이버 뉴스 API CORS 해결 방법
다음 내용과 이어지는 내용입니다.
개발 환경에서 네이버 뉴스 API CORS를 해결하기 위해서 Proxy서버를 사용하였다.
하지만 배포후 네이버 뉴스 API가 정상적으로 데이터를 못가져오는 것을 확인하였다.
2. 원인 분석
✅ proxy는 로컬 서버에서만 동작한다!
우리는 vite.config.js에서 proxy 설정을 통해 API 요청을 중계하고 있었다. 하지만 이 방식은 개발 서버 (localhost)에서만 동작하며, 실제 배포된 상태에서는 해당 설정이 무시된다.
따라서 배포 환경에서는 프론트엔드(클라이언트)가 직접 API에 요청하기 때문에 네이버 API의 CORS 정책에 의해 차단된다.
3. 문제 해결
배포 환경에서도 proxy 서버를 활용하기 위해서는 크게 두 가지 방법이 있다.
- 백엔드에서 Proxy 서버 만들기
- 클라우드 서버 활용하기
현재 상황에서는 직접 백엔드 서버를 구축하는 것이 어렵다고 판단하여, 클라우드 서버를 활용하는 방법을 선택했다.
그중에서도 Cloudflare Workers를 사용했다.
Cloudflare Workers는 Cloudflare에서 제공하는 서버리스 컴퓨팅 플랫폼으로, 기존 서버리스 함수(AWS Lambda, Vercel, Netlify)보다 더 빠르고 가벼운 서버리스 환경을 제공하는 것이 특징이다.
✅ 서버리스 함수를 활용한 CORS 해결 방법
서버리스 함수를 활용하면, 브라우저에서 직접 외부 API에 요청하는 대신 서버리스 함수가 API 요청을 대신 처리해 CORS 문제를 해결할 수 있다.
frontend.com→serverless-proxy.com→api.naver.com요청 ✅ (CORS 해결)
Cloudflare Workers를 가면 workers & pages에서 서버리스 함수를 생성할 수 있다.
다음과 같이 설정 했으면 우측의 있는 서버리스 엔드포인트로 데이터를 불러올 수 있다.
- 서버리스 엔드포인트 : 서버리스 함수가 배포된 후 클라이언트가 API 요청을 보낼 수 있는 주소
4. 결과
따라서 기존의 vite.config.js에서 proxy 설정을 제거하고, 서버리스 엔드포인트로 API요청을 보내면 CORS를 해결하고 데이터를 받을 수 있다.
출처
