Skip to content

fix: Upbit API CORS 차단 — 서버사이드 프록시 필요 #93

@fray-cloud

Description

@fray-cloud

문제

Vercel 배포 환경에서 브라우저가 Upbit API를 직접 호출할 때 CORS 정책에 의해 차단됨.

영향 범위

  • Upbit REST API (캔들 데이터): https://api.upbit.com/v1/candles/... → CORS 차단
  • Upbit WebSocket (실시간 시세): wss://api.upbit.com/websocket/v1 → 연결 실패
  • Socket.IO /ws/: 데모 모드에서 불필요한 order-updates store 연결 시도

Binance REST/WebSocket은 CORS 허용되어 정상 동작.

콘솔 에러

Access to fetch at 'https://api.upbit.com/v1/candles/minutes/5?market=KRW-BTC&count=200' 
from origin 'https://fray-cloud-coin.vercel.app' has been blocked by CORS policy

해결 방안

1. Upbit REST API → Next.js Route Handler 프록시

  • apps/web/src/app/api/demo-candles/[exchange]/[symbol]/route.ts 생성
  • 서버사이드에서 Upbit API fetch → 클라이언트에 JSON 반환 (CORS 없음)
  • MSW 핸들러에서 거래소 직접 호출 대신 이 Route Handler 호출

2. Upbit WebSocket → 서버사이드 프록시 또는 Binance만 사용

  • 옵션 A: Upbit WS 제거, Binance WS만 사용 (Binance CORS 허용)
  • 옵션 B: Next.js API Route로 SSE(Server-Sent Events) 프록시 구현
  • 옵션 C: Vercel Edge Function에서 WebSocket 프록시 (제한적)

3. Socket.IO 불필요 연결 차단

  • use-order-updates-store.ts에서 데모 모드일 때 Socket.IO 연결 스킵

수정 대상 파일

  • apps/web/src/app/api/demo-candles/[exchange]/[symbol]/route.ts (신규)
  • apps/web/src/mocks/handlers.ts — candle 핸들러 수정
  • apps/web/src/lib/demo-ws.ts — Upbit WS 제거 또는 프록시
  • apps/web/src/stores/use-order-updates-store.ts — 데모 모드 분기

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions