vue.config.js

• vue에서 개발 서버로 돌리고 이때 axios 나 fetch 를 사용하여 req를 날릴 때 매번 번거롭게 모든 주소값을 사용하면 매우 불편하다.

• 또한 주소값이나 포트번호가 바뀌게 되는 순간 모오오오든 req의 url을 바꿔야한다. 이는 끔찍하다.

• 그래서 우리는 vue.config.js 파일을 이용하여 편의상 특정 값을 back-end 주소로 설정하고 changeOrigin 이라는 속성으로 CORS또한 피해왔다.

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

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

• 그리고 위 코드를 사용할 땐

async signOut(context) {
  const params = {id: context.rootGetters['getUserId']}
  const response = await axios.get('/api/common/signout', {
    params
  })
  ...

• 위와 같이 사용했다. 이렇게 되면 /api를 찾아서 해당 경로를 지우고(pathRewrite) target의 주소값으로 바꿔준다.

build 시 문제점

• 하지만 이때 문제가 생긴다. 이 작업을 Webpack에서 해줬는데 문제는 build할 땐 위 코드가 적용되지 않는다는 점이다.

• 그래서 우리는 다른 방식으로 좀 더 firm한 방식으로 baseURL을 저장해줄 필요가 있었다. 바로 JS에서 주구장창 쓰는 export와 import이다.

• 우선 baseURL.js이라는 파일을 하나 만들고 거기에 axios.create라는 메서드를 이용해 baseURL이라는 미리 설정된 속성값에 해당 값을 설정해준다.

baseURL.js

import axios from 'axios';

const baseURL = axios.create({
    baseURL: 'http://localhost:8081'
});

export default baseURL;

• 그리고 이 해당 메서드를 각각의 url이 필요한 파일에서 import해서 사용하면 된다.

actions.js

import baseURL from "@/store/baseUrl";

async signIn(context, payload) {
  const userInput = {
    id: payload.id,
    password: payload.password
  }
  const response = await baseURL.post('/common/signin',userInput)
  ...
},

• 이제 proxy에 의존하지 않고 언제든 build가 가능하며 주소값 변경 또한 매우 간편하게 1개의 파일(baseURL.js)만 관리하면 되니 매우 편해진다.

캐시 삭제 새로고침

• 이때 왜 변경이 안 되지? 할 수 있는데 문제는 바로 캐시가 남아있으면 브라우저는 캐시를 사용해 보다 빠르게 동작하게 만들었기 때문에 반드시 캐시를 삭제 후 다시 시도해줘야한다.

• 캐시 삭제 후 새로고침 ctrl+f5

• 그럼 성공적으로 변경이 된 것을 확인할 수 있을 것이다.