记录Vue2项目问题——Request failed with status code 404

问题：在调用接口获取列表时，报404错误。

排查：

1）接口路径没有错误；

api文件

  getPageSource: data => request({
        method: 'get',
        url: `/source/resourceCategory/getPage`,
        data
  })

2）也写了代理跨域。以 api 开头的接口请求会被代理到目标地址；

request.js文件

/* axios默认配置*/
/* 注：这里要配置环境变量，不然上线后会出问题。以下是临时配置*/
const instance = axios.create({
    timeout: 20000,
    baseURL: "/api", // 服务器请求地址
});

vue.config.js文件

    server: {
        host: "0.0.0.0",
        proxy: {
            '/api': {
                target: "http://192.168.1.146:9305",// 目标地址
                ws: true,// 开始ws代理
                changeOrigin: true,// 开发模式
                rewrite: (path) => path.replace(/^\/api/, ""),
            }
        }
    },

3）404不是参数问题，但是也检查了参数；

async getSourceList() {
    const data = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        delFlag: "",
    };
    let res = await sourceOmApi.getPageSource(data);
    console.log(res);
},

一一排查后，在朋友“可乐鸡翅”的帮助下发现是 Apifox上的服务器地址和代理的服务器地址不一致，公司的每个后端环境不一致。

解决：将代理地址改为Apifox上提供接口的服务器地址，并重启项目即可

解决后，控制台已经打印出结果，但是还有小报错

网上排查原因：是因为错误的信息没有提示，

解决：

1）在接口后补上catch捕获错误即可；

2）也可以在axios封装时，将相应拦截器的ruturn返回的结果设置为res.data