前端路由代理未生效的问题

Question

问题遇到的现象和发生背景

cuecil版本为4.5.13
node版本为10.16.3
开发过程中我在根目录下写了vue.config.js文件希望完成路由代理
但多次尝试后接口并未接通，在postman中测试接口是通的

问题相关代码，请勿粘贴截图

vue.config.js代码如下

module.exports = {
  publicPath: "./",  
  devServer: {
    proxy: {
      '/api': {
        target: 'http://120.55.15.78:8989',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
}

调用接口部分如下

join() {
      axios({
        url: "/api/user/login",
        method: "post",
        data: {
          account: "admin",
          password: "123456",
          cid: "1",
        },
      })
        .then((res) => res)
        .then((res) => {
          console.log(res);
        });
    },

运行结果及报错内容

运行结果为

     POST http://192.168.1.10:8080/api/api/user/login 404 (Not Found)

及

    Uncaught (in promise) Error: Request failed with status code 404
       at createError (createError.js?2d83:16:1)
       at settle (settle.js?467f:17:1)
       at XMLHttpRequest.onloadend (xhr.js?b50d:66:1)

我的解答思路和尝试过的方法

我认为此时访问的接口应该是
http://120.55.15.78:8989/api/api/user/login
但实际访问的应该依旧是
http://192.168.1.10:8080/api/api/user/login
所以会报404
我知道config文件修改后需要重启，我多次尝试依旧未生效

我想要达到的结果

成功访问接口并返回相应的数据如下

{
    "code": 0,
    "msg": "参数不能为空！",
    "time": "1644371711",
    "data": null
}

Answer 1

  devServer: {
    proxy: {
      "/api": {
        target: "http://120.55.15.78:8989",
        ws: true,
        // changeOrigin: true,
        pathRewrite: {
          "^/api": "/api",
        },
      },
    },
  },

我试了一下 正确的应该是这样配置的 你可以按照我的方式进行更改