vue local devserver proxy

# 예시

# 현재 로컬 서버 http://localhost:8080

# 요청 서버 http://my.ysoftman.com:443

# 로컬에서 vue 개발시, 도메인이 다른 호스트 요청시 발생하는

# cors(Cross-origin resource sharing) 에러 해결을 위해

# vue.config.js (webpack) proxy 를 설정한다.

 

module.exports = {

  // 로컬 개발시(이 파일 수정시 npm run serve 로 다시 시작해야함)

  devServer: {

    https: true,

    // /api 로 시작하는 경로 요청을 target 으로 요청

    proxy: {

      '^/api': {

        target: 'https://my.ysoftman.com:443',

        changeOrigin: true,

      },

    disableHostCheck: true,

  },

};

# 위와 같이 프록시 설정하면, cors 이슈도 없고, 쿠키등의 헤더도 잘 전달된다.

# 주의사항

# xmlhttprequest, axios 등으로 요청 호스트명을 빼서 로컬 호스트로 요청해야 한다.

# 그래야 위 (로컬서버에 대한) 프록시 처리가 된다.

#####

# 만약 호스트명이 필요한 실제 서비스 환경과 로컬 develop 개발 환경 구분이 필요한 경우

# host 변수을 두고 다음과 같이 process.env.NODE_ENV 에 따라 '' 로 설정해 처리하자.

let host = "http://my.ysoftman.com:443"

if (process.env.NODE_ENV != null && process.env.NODE_ENV == 'development')

{

  return '';

}