Vue.js中使用axios.get传递多参数调用API失效如何解决

你的代码请求失效核心是URL拼接错误：

• 你手动在接口地址后拼接了格式错误的残缺查询字符串? subsidiaryId =& contractType=，本身axios的params配置会自动按键值对拼接标准查询参数，你手动加的这部分存在多余空格、参数缺值、连接符位置错误的问题，会和axios自动生成的参数冲突，直接生成非法请求地址。
• 接口地址字符串被你手动拆成了两行，会引入多余的换行空白字符，导致地址解析失败。
• 你手动拼接的参数名是contractType，和params里定义的contractTypeId不一致，容易出现后端参数匹配不上的问题。

直接删掉URL里手动拼接的错误查询串，只保留接口基础路径即可，参数拼接完全交给axios处理，修正后代码如下：

getData: function (id) {
    let subsidiary = this.$route.query.subsidiaryId;

    axios.get("https://localhost:44391/api/ContractType/ContractTypePhos", {
        params: {
            subsidiaryId: subsidiary,
            contractTypeId: id
        }
    })
    .then((res) => {
        if (res.data == "No Pho Founds") {
            swal(res.data);
            this.showGrid = true;
        } else {
            this.enabledPhos = res.data;
        }
    })
    .catch(err => {
        console.error("请求异常：", err)
    })
}

• 确认后端接口实际接收的第二个参数名，如果后端要求参数名是contractType而非contractTypeId，把params里对应的键名改成和后端一致即可。
• 本地调试时打开浏览器F12开发者工具，切到网络面板查看实际发出的请求，正常的请求地址格式应该为https://localhost:44391/api/ContractType/ContractTypePhos?subsidiaryId=实际值&contractTypeId=实际值，同时确认本地44391端口的接口服务正常运行，没有证书拦截、跨域拦截问题。

内容的提问来源于stack exchange，提问作者Nesrine Missaoui