[Vue.js] Proxy 설정

Proxy

프록시는 클라이언트와 서버 사이에 위치하여, 그들 사이의 HTTP 메시지를 정리하는 중개인의 역할을 합니다.

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

Proxy 서버

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

CORS ( Cross-Origin Resource Sharing )

웹 어플리케이션에서 도메인, 포트 프로토콜이 다른곳으로 HTTP 요청을 보낼 수 없도록 브라우저가 요청을 막는 보안정책입니다.

vue.config.js 파일의 devServer -> proxy 설정

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

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

getMyList() {
  axios
  	.post('api/member/info', this.userId) 
  	.then((response) => {
      console.log(response)
        if (response.status === 200) {
          console.log(Response.date)
          this.myList = response.data
        }
      })
      .catch(function (error) {
    	console.log(error) {
      })
  }