Vue.js 3 - Proxy 설정

Proxy 

클라이언트와 서버가 별도의 포트를 사용할때 클라이언트가 서버로 HTTP요청을 하게 되면 CORS 문제가 발생한다 해당 문제를 해결하기 위해 Proxy 서버 사용한다 . 

Proxy 서버

프록시 서버

• 클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수있게 해주는 응용 프로그램
• 서버 클라이언트 사이의 중계기로써 대리로 통신을 수행하는 것을 프록시라 한다

CORS

Cross-Origin Resource Sharing의 줄임말로, 한국어로 직역하면 교차 출처 리소스 공유라고 해석할 수 있다. 여기서 “교차 출처”라고 하는 것은 “다른 출처”를 의미 웹 어플리케이션에서 도메인,포트 프로토콜이 다른곳으로 HTTP 요청을 보낼 수 없도록 브라우저가 요청을 막는 보안 정책

vue.config.js ->  devServer ->  proxy설정

vue.config.js 

module.exports = {
  devServer: {
    proxy: {
    // 사용할 url 명 
      '/api': {
      // 백엔드 주소
        target: 'http://192.168.30.154:3030',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

백엔드 서버에서 회원 정보를 가져오는 메서드 

getMyList() {
      axios
        .post('/api/member/myInfo', this.userMemId)

        .then((response) => {
          console.log(response)
          if (response.status === 200) {
            console.log(response.data)
            this.myList = response.data
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }

 

출처 : https://rkaehdaos.github.io/dev/frontend/Vue-js/vue-use-proxy/