문제
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 — 데모 모드 분기
문제
Vercel 배포 환경에서 브라우저가 Upbit API를 직접 호출할 때 CORS 정책에 의해 차단됨.
영향 범위
https://api.upbit.com/v1/candles/...→ CORS 차단wss://api.upbit.com/websocket/v1→ 연결 실패/ws/: 데모 모드에서 불필요한 order-updates store 연결 시도콘솔 에러
해결 방안
1. Upbit REST API → Next.js Route Handler 프록시
apps/web/src/app/api/demo-candles/[exchange]/[symbol]/route.ts생성2. Upbit WebSocket → 서버사이드 프록시 또는 Binance만 사용
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— 데모 모드 분기