웹 개발하면서 CORS 오류를 자주 마주하게 됨. 특히 다른 서버의 API를 호출할 때 CORS(Cross-Origin Resource Sharing) 오류가 많이 발생하는데, 초보자든 숙련자든 한 번쯤 겪게 되는 문제임. CORS의 개념, 문제 발생 이유, 그리고 해결 방법에 대해 알아봄.
원쌤의 vue.js 퀵 스타트
1. CORS란?
CORS는 크로스 오리진 리소스 공유를 의미함. 브라우저는 기본적으로 보안을 위해 같은 출처(Same-Origin) 정책을 따름. 이 정책은 한 웹 애플리케이션이 다른 도메인에서 리소스를 가져오는 것을 제한함.
예를 들어 https://example.com에서 로드된 웹 페이지가 https://api.otherdomain.com/data에 요청을 보내려 할 때, 브라우저는 보안을 이유로 차단할 수 있음.
Same-Origin의 예시:
- 같은 도메인: https://example.com와 https://example.com
- 다른 도메인: https://example.com와 https://another.com
- 다른 프로토콜: https://example.com와 http://example.com
Example Domain
Example Domain This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission. More information...
example.com
2. CORS 오류가 발생하는 이유
브라우저는 보안을 위해 의도하지 않은 방식의 외부 리소스 요청을 차단함. 서버가 특정 설정을 통해 이 요청을 허용해야만 CORS 오류 없이 데이터를 가져올 수 있음.
3. CORS 해결을 위한 서버 설정
CORS 문제를 해결하려면 서버에서 응답 헤더에 허용할 도메인, 메서드, 헤더 정보를 설정해야 함. 이렇게 하면 브라우저가 외부 리소스를 안전하게 사용할 수 있음.
- Access-Control-Allow-Origin: 요청을 허용할 도메인을 설정함. 모든 도메인을 허용하려면 *로 설정할 수 있음.
- Access-Control-Allow-Methods: 허용할 HTTP 메서드를 지정함. 예: GET, POST, DELETE, PUT 등.
- Access-Control-Allow-Headers: 요청에 사용할 수 있는 HTTP 헤더를 설정함.
- Access-Control-Allow-Credentials: 인증 정보(쿠키 등)를 요청에 포함할 수 있도록 설정함.
4. CORS 해결 방법
- 서버에서 CORS 설정: 서버 응답 헤더에 Access-Control-Allow-Origin, Access-Control-Allow-Methods 등을 추가하여 필요한 도메인의 요청을 허용
- 프록시 서버 사용: 서버 설정이 불가능한 경우, 로컬에서 프록시 서버를 설정하여 동일 출처로 간주되도록 요청을 보냄
- API 게이트웨이 사용: 클라우드에서 API 게이트웨이를 사용하여 API 요청을 프록시하며, CORS를 설정할 수 있음