CORS 설정
Cross-Origin Resource Sharing (CORS)는 브라우저에서 다른 도메인의 리소스에 접근할 수 있도록 허용하는 메커니즘입니다.
CORS란?
브라우저는 보안상의 이유로 스크립트가 다른 도메인의 리소스에 접근하는 것을 제한합니다. CORS를 설정하면 특정 도메인에서의 접근을 허용할 수 있습니다.
https://myapp.com (프론트엔드)
↓ API 요청
https://api.connectbase.world (백엔드)
↓ CORS 체크
허용된 도메인? → 응답 반환CORS 설정 방법
📌 CORS 허용 도메인은 콘솔에서만 설정합니다.
connectbase-clientSDK 에는 CORS 설정 메서드가 없습니다.
콘솔에서 설정
- 콘솔 → 사용할 앱 선택
- 설정 (Settings) → CORS 메뉴로 이동
- 허용 도메인 추가 클릭
- 사용할 도메인 등록 후 저장
일반적인 도메인 패턴
| 환경 | 등록할 origin |
|---|---|
| Vite 로컬 개발 | http://localhost:5173 |
| Next.js 로컬 개발 | http://localhost:3000 |
| 스테이징 | https://staging.myapp.com |
| 프로덕션 | https://myapp.com |
| 서브도메인 포함 | https://www.myapp.com (메인과 별도 등록 필요) |
서버 환경(Node.js, Cloud Function)에서 호출할 때는 CORS 정책이 적용되지 않습니다. CORS는 브라우저 호출에서만 발생합니다.
문제 해결
CORS 에러 디버깅
브라우저 콘솔에서 다음과 같은 에러가 나타날 수 있습니다:
Access to fetch at 'https://api.connectbase.world/...' from origin
'https://myapp.com' has been blocked by CORS policy해결 방법
- Origin 일치 확인: 요청하는 도메인이 콘솔의 허용 목록과 정확히 일치하는지 확인
- 프로토콜 확인:
http://와https://는 다른 origin 으로 취급됨 - 포트 확인: 포트가 다르면 다른 origin
- dev 서버 재시작: 도메인 변경 후 dev 서버 재시작
일반적인 실수
| 잘못된 값 | 올바른 값 |
|---|---|
https://myapp.com/ (뒤 슬래시) | https://myapp.com |
http://myapp.com (HTTP) | https://myapp.com |
https://myapp.com:443 (포트 명시) | https://myapp.com |
* (전체 허용) | 명시적 도메인 목록 |
Preflight 요청
복잡한 요청(예: PUT, DELETE, 커스텀 헤더, JSON body)은 preflight OPTIONS 요청이 먼저 발생합니다.
1. 브라우저 → OPTIONS 요청 (preflight)
2. 서버 → CORS 헤더로 응답
3. 브라우저 → 실제 요청 (POST/PUT/...)
4. 서버 → 데이터 응답Connect Base 서버는 자동으로 preflight 요청을 처리합니다. 별도 설정이 필요하지 않습니다.