[Vue] Vue CLI vue.config.js에 설정한 devServer proxy가 적용이 안됨

환경

✔️ Vue.js 3.2.45
✔️ Vue CLI 5.0.8

이전 설정

module.exports = defineConfig({
  devServer: {
    port: 3000,
    historyApiFallback: true,
    proxy: {
      "^/api": {
        target: "http://localhost:8080",
        ws: true,
        changeOrigin: true,
      },
    },
  },
});

 

✔️ proxy 옵션에 `^/api`라고 설정한 경우,
만약, `/api/login` 요청을 보낼 경우 자동으로 `http://localhost:8080/login`으로 요청이 간다고 한다.
=> 하지만, 안먹힘

변경 설정

module.exports = defineConfig({
  devServer: {
    port: 3000,
    historyApiFallback: true,
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
});

 

✔️ `/api`라고 설정하고 `pathRewrite` 옵션을 사용해 `^/api`를 공백으로 처리하면 위의 예와 같이 동작한다.