CORS란?
CORS는 기본적으로 SOP(Same-Origin Policy, 동일 출처 정책) 때문에 발생합니다.
웹 애플리케이션이 자신의 출처와 다른 곳으로 HTTP 요청을 보낼 때,
브라우저는 보안상의 이유로 이 요청이 안전한지 검사하고 허용되지 않은 경우 차단합니다.
CORS 발생 조건
- 프로토콜(Protocol)이 다를 때: http와 https는 서로 다른 출처
- 도메인(Domain/Host)이 다를 때: example.com과 api.example.com은 서로 다른 출처
- 포트(Port)가 다를 때
위와 같은 경우 다른 출처로 인식합니다.
CORS 해결 방법
1. 서버가 브라우저에게 이 요청은 안전하다고 허락해 주는 것
서버 응답 헤더에 Access-Control-Allow-Origin을 추가합니다.
특정 도메인 허용: Access-Control-Allow-Origin: https://my-frontend.com
모든 도메인 허용: Access-Control-Allow-Origin: *
2. 프레임워크별 미들웨어 사용
직접 헤더를 넣기보다는 사용 중인 언어/프레임워크의 라이브러리를 쓰는 게 편합니다.
Node.js (Express): cors 패키지 설치 후 app.use(cors()) 사용
Spring Boot: @CrossOrigin 어노테이션 사용 혹은 WebMvcConfigurer 설정
3. 개발 환경에서의 Proxy 설정
프론트엔드 개발 중에만 임시로 해결하고 싶다면, 클라이언트 쪽에서 프록시를 설정해 서버와 같은 출처인 것처럼 속일 수 있습니다.
React (package.json)
"proxy": "http://localhost:8080" 추가
Webpack/Vite
설정 파일에서 server.proxy 옵션 사용
4. 백엔드 앞단에 Reverse Proxy 배치 (Nginx)
실제 운영 환경에서는 Nginx 같은 웹 서버를 앞에 두고, 프론트와 백엔드를 같은 도메인 아래 묶어서 CORS 상황 자체를 만들지 않기도 합니다.
