[CORS 에러] Access to XMLHttpRequest at '주소A' from origin '주소B' has been blocked by CORS policy 해결

에러

아파치 서버랑 vue.js dev 서버를 따로 띄워놓고 개발하다 '주소B(vue.js 포트)'로부터 '주소A(아파치 포트)'에 데이터를 요청했을 때 아래와 같은 에러가 떴다.

 

원인

보안상 웹 애플리케이션은 자신의 출처와 동일한 리소스만을 불러올 수 있는데, 위 경우처럼 다른 출처의 리소스를 불러올 때 위와 같은 CORS 에러가 나타난다.

이때 다른 출처라 함은, 프로토콜(http, https), 호스트(example.com), 포트(80,443 등)가 모두 같아야 하는데,

그렇지 않은 경우 브라우저는 이를 다른 출처로 간주하게 된다.

 

해결

여러 해결 방법이 있지만 내가 이용한 방법은 proxy 서버를 설정하는 방법이었다.

✅ 프록시(proxy) 서버란?
다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 서버를 말한다.
즉, 프론트단에서 CORS 에러 핸들링은 하는 것은 서버로 가기 전에 이 프록시 서버를 거쳐서 출처를 res와 같게 수정하고, 서버에 접근하도록 하는 것이다. 

예컨대, 아래와 같이 냅다 다른 출처로 요청을 보낼 때 에러가 발생했었다면,

vue.config.js에 다음의 proxy 설정을 걸어두고 '/api' 경로로 서버에 요청을 보내면,

내가 자료를 받아오려는 서버측 경로와 같은 경로로 매칭되어 요청이 가게 되고, 그 결과 서버로부터 데이터를 받아올 수 있게 된다.

⬇️ 더 자세한 설명은 이전 포스팅 참고

[Vue.js+MySQL] axios로 API 호출 및 데이터 받기

이렇게 바꾸고도 여전히 콘솔창에 CORS 에러가 표시된다면 npm run serve로 개발 서버를 새로 실행한 후 확인하면 에러가 사라지고 서버로부터 받아온 데이터를 확인할 수 있다!!

위와 같이 프론트엔드에서 webpack-dev-server proxy 기능을 사용하면,

서버쪽 코드를 수정하지 않고도 빠르게 문제를 해결할 수 있다.🥰