[뷰(Vue)] Proxy

// proxy

- 클라이언트와 서버가 포트를 다르게 사용할 때, CORS 문제가 발생하는 것을 방지하기 위해 설정한다.

- 클라이언트에서 설정하는 방법과 서버에서 설정하는 방법이 있다.

---

1. 클라이언트에서 설정

- vue.config.js 파일을 아래와 같이 수정한다.

const { defineConfig } = require('@vue/cli-service');

const target = 'http://localhost:8082';

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        target,
        changeOrigin: true
      }
    }
  }
})

* 참고로 나는 vue 서버가 8080, 스프링부트 서버가 8082이다.

- 이렇게 하면, devServer > 개발 버전일 때만 적용이 되고, 운영에는 적용되지 않는 문제점이 있다.

---

2. 서버에서 설정

//클라이언트 주소 넣기
@CrossOrigin(origins = "http://localhost:8080")