配置proxy中的pathRewrite，没有把路径别名转成我想要的wpp，该怎么解决？

Question

因为每个接口都有/wpp这个字段，但是项目跨域配置的pathRewrite并没有自动加上/wpp，是因为我的写法有问题吗？

我的想法是使用下面这个配置直接把每个接口前自动加上/wpp，但是貌似不可行，还要在接口配置中加上baseURL: '/wpp',

这是完整的接口地址：http://192.168.1.xxx:8888/wpp/system/config
这是项目接口写法：proxy.$request.get('/system/config', { params }).then((data) => {})
vue.config.js中devServer配置

devServer: {
    // open: process.platform === 'darwin',
    port: 8080,
    open: true, // 设置服务启动时是否自动打开浏览器
    https: false,
    hotOnly: false,
    proxy: {
      '/wpp': {
        target: 'http://192.168.1.xxx:8888',
        changeOrigin: true,
        pathRewrite: {
          '^/wpp': '/wpp', // 请求数据路径别名
        },
      },
    },
}

request.js 接口配置

const instance = axios.create({
  baseURL: `/wpp`, // 这里本来不准备加上baseURL的，但是pathRewrite没有把/wpp加上就导致我要在这里配置
})

上面不加baseURL：/wpp会找不到目标

Answer 1

因为每个接口都有/wpp这个字段，但是项目跨域配置的pathRewrite并没有自动加上/wpp

1. 每个接口都以/wpp开头，那么这段代码没错，baseURL为/wpp

   const instance = axios.create({
     baseURL: `/wpp`, // 这里本来不准备加上baseURL的，但是pathRewrite没有把/wpp加上就导致我要在这里配置
   })

2. pathRewrite是不会自动带上任何前缀的，需要自己去配置，作用是用于路径重写。比如你在请求接口都带上了/wpp的前缀，但是后端接口并没有/wpp，那么此时就需要用pathRewrite去重写路径为''，否则报404

我的想法是使用下面这个配置直接把每个接口前自动加上/wpp，但是貌似不可行，还要在接口配置中加上baseURL: '/wpp'

前端想要在接口加前缀，最直接的就是配置baseURL

Answer 2

proxy: {
    // 当url中包含/wpp时执行
    '/wpp': {
        target: 'http://192.168.1.xxx:8888',
        changeOrigin: true,
        pathRewrite: {
          '^/wpp': '/wpp', // 请求数据路径别名
        },
      },
    },

用proxy给url加统一的前缀是不行的，应该设置baseURL。