CORS(Cross-Origin Resource Sharing) 오류는 브라우저의 보안 정책 때문에 발생한다.
현재 상황
- 프론트엔드: http://localhost:3000
- API 서버: http://localhost:3001
- 포트가 다르면 다른 Origin으로 간주됩니다.
CORS 동작 방식
1. 브라우저가 요청을 보냅니다
- 클라이언트에서 http://localhost:3001/api/test로 요청
2. 브라우저가 Origin을 확인합니다
- 요청 출처: http://localhost:3000
- 요청 대상: http://localhost:3001
- Origin이 다르므로 CORS 정책 적용
3. API 서버의 응답 헤더를 확인합니다
- 브라우저는 응답에 Access-Control-Allow-Origin 헤더가 있는지 확인
- 없거나 현재 Origin(http://localhost:3000)을 허용하지 않으면 차단
4. 브라우저가 응답을 차단합니다
- JavaScript에서 응답에 접근할 수 없음
- 콘솔에 CORS 오류 표시