vue + spring devServer CORS 설정 (axios)

clean·2021년 7월 28일

Proxy Spring devServer vue webpack

알고보면 별거 아닌데........ 작은 삽질기 시작

현재 내 개발 환경은 이렇다.

서버 (tomcat) : http://127.0.0.1:8080/context
front devServer : http://127.0.0.1:4000/context
서버와 Front는 하나의 프로젝트에 있고 로그인 정보는 session에 저장한다. (JWT 이용하지 않음)

개발 서버로 작업 시, 4000번 port에서 8080으로 API를 요청하니까 cors 에러가 발생한다.
따라서 이에 대한 처리가 필요하다.

처음엔 proxy 서버를 사용하지 않고 아래와 같이 설정 후 사용했었다.

처음 설정 방법 (문제 있음)

vue.config.js

module.exports = {
  ... // 생략
  devServer: {
    overlay: false,
    port: 4000
  },
..
}

axios baseURL

// .env.develoment (npm run server)
VUE_APP_PUBLIC_PATH=/context/
VUE_APP_API_URL=http://127.0.0.1:8080

// .env.production (npm run build)
VUE_APP_PUBLIC_PATH=/context/
VUE_APP_API_URL=

// axios/index.js
axios.create({
  baseURL: `${process.env.VUE_APP_API_URL}${process.env.VUE_APP_PUBLIC_PATH}`
  ...
});

개발 시: http://127.0.0.1:8080/context/
운영 시: /context/

Spring > servlet-context.xml

<cors>
  	<!-- 다른 PC에서도 접속해야할 경우 allowed-origins에 http://내IP:4000 도 추가 -->
	<mapping path="/**" allowed-origins="http://localhost:4000, http://127.0.0.1:4000" />
</cors>

이렇게 설정할 경우 CORS 문제 없이 API를 호출할 수는 있지만 문제는 세션이 매번 새로 생성된다는 것이다. (도메인이 다르니까)
이런 저런 방법을 찾다가..

질문:
답변:

위 글을 보고 axios 헤더 설정에

withCredentials: true
Spring > ~filter.java > res.setHeader("Access-Control-Allow-Credentials", "true");

이렇게 설정해봤었다. CORS 에러는 발생하지 않지만.. 여전히 Session은 요청시 마다 새로 생성되었다.
(쿠키를 이용하기 위한 방법인 것 같다.)

변경한 설정 방법 (성공)

vue.config.js

module.exports = {
  //... 생략
  devServer: {
    overlay: false,
    port: 4000,
    contentBase: '.',
    proxy: { // 이부분 추가
      '^/context/api': {
        target: 'http://127.0.0.1:8080/context', // 요청할 서버 주소
        pathRewrite: { '^/context/api': '' },
        changeOrigin: true,
        logLevel: 'debug', // 터미널에 proxy 로그가 찍힌다. 
      },
    },
  },

실제 요청받을 서버 컨트롤러에는 /api/ 가 포함되어있지않다. 따라서 pathRewrite 속성을 이용했다.
위와 같이 설정 시 최종적으로 아래와 같이 요청된다.
- 요청 URL: http://127.0.0.1:4000/context/api/getuser
- 변경 URL: http://127.0.0.1:8080/context/getuser

axios baseURL

// .env.develoment
VUE_APP_PUBLIC_PATH=/context/api/

// .env.production
VUE_APP_PUBLIC_PATH=/context/

// axios/index.js
axios.create({
  baseURL: process.env.VUE_APP_PUBLIC_PATH
  ...
});

개발 시: /context/api/
- 개발 서버로 작업 시 모든 api 호출 시 /api를 붙여서 요청하도록 처리
운영 시: /context/