🔗 출처
📌 CORS
브라우저는 기본적으로 '같은 출처에서만 리소스를 공유할 수 있다.'는 규칙을 따르고 있다.
개발을 하다보면 기능상 어쩔 수 없이 다른 출처 간 상호작용이 필요할 때가 있다. 이러한 경우를 대비해서 몇 가지의 예외 조항을 두고 다른 리소스 요청을 허락하긷 한다. 그 중 하나가 CORS 정책을 지킨 리소스 요청이다.
CORS란
교차 출처 리소스 공유(CORS)에서 교차 출처는 다른 출처를 의미한다.
즉 도메인이 다른 서버끼리 리소스를 주고 받을 때 보안을 위해 설정된 정책이다.
출처를 비교하는 로직이 서버에 구현된 것이 아니라 브라우저에 구현되어있다. 만약 CORS 정책을 위반하는 리소스 요청을 하더라도 해당 서버가 같은 출처에서 보낸 요청만 처리하겠다는 로직이 없다면 서버는 정상적으로 응답을 하고 이후 브라우저가 이 응답을 분석해서 CORS 정책 위반이라고 판단되면 그 응답을 사용하지 않고 그냥 버린다.
CORS 에러 해결 방법
1. Access-Control-Allow-Origin 세팅하기
Access-Control-Allow-Origin 헤더에 알맞는 값을 세팅해준다. 이때 와일트 카드인 *을 사용해서 헤더를 세팅하게 되면 모든 출처에서 오는 요청을 받겠다는 의미이다. 다만 보안적으로 이슈가 발생할 수 있다. 따라서
Access-Control-Allow-Origin: https://example.com처럼 출처를 명확히게 명시하는 것이 좋다.
2. Webpack Dev Server로 리버스 프록싱하기
프론트엔드 개발자는 대부분 웹펙과 webpack-dev-server를 사용하여 자신의 머신에 개발 환경을 구추가헥 되는데, 이 라이브러리가 제공하는 프록시 기능을 사용하면 편하게 CORS 정책을 우회할 수 있다.
로컬 환경에서 /api로 시작하는 URL로 보내는 요청에 대해 브라우저는 localhost:8000/api로 요청을 보내는 것으로 알고 있지만, 사실 뒤에서 웹팩이 https://api.evan.com으로 요청을 프록싱해주기 때문에 마치 CORS 정책을 지킨 것 처럼 브라우저를 속이면서도 원하는 서버와 자유롭케 통신할 수 있다.
그러나 이 방법은 로컬 개발 환경에서만 통하는 방법이고 근본적인 해결 방법이 아니다.
따라서 운영 환경에서 CORS 정책 위반 문제를 해결하기 위해선 백엔드 개발자가 서버 어플리케이션의 응답 헤더에 올바는 Access-Control-Allow-Origin이 내려오도록 세팅해야 한다.
