axios CORS 에러 해결방법 ( 클라이언트 )

Vue.js + Electron으로 간단한 데스크탑용 앱을 만드는 도중 문제가 발생..

바로 CORS ( Cross-Origin Resource Sharing ) ....

허용하지 않은 크로스 도메인에서의 데이터 요청시 보안문제로 인한 거부가 발생합니다.

서버설정으로 해결하면 좋겠지만 그렇지 못할때 해결하는 방법입니다.

필요한 라이브러리는 vue-axios-cors 이용하며 기존 vue-axios를 이용하였습니다.

 

설치는 npm install vue-axios-cors

 

main.js에 추가한 소스

import axios from 'axios'

import AxiosPlugin from 'vue-axios-cors';

Vue.use(AxiosPlugin);

axios.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

 

위의 설정으로 cors 오류는 해결이 되었습니다.  다만 웹에서도 가능한지는 테스트 못했습니다.

제가 사용한 환경은 Electron.js + vue.js + axios 로 데스크탑 애플리케이션 개발에 사용되었습니다.