axios请求浏览器访问时404

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

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

一、vue.config.js配置好了
proxy: {
'/api': {
target: "http://127.0.0.1:3000/",
secure:false,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}

二、入口main.js也配置好了
Vue.prototype.$axios=axios
axios.defaults.baseURL='/api'

三、router里面也写好了接口
router.get('/', (req, res) => {
if (err) { return res.send("failed"); }
res.send('test111');
})
router.get('/mp3', (req, res) => {
if (err) { return res.send("failed"); }
res.send('222');
})

四、vue组件中进行axios请求
methods: {
test() {
this.$axios({
baseURL:'/api',
url: "/mp3",
method: "get",
}).then((res) => {
console.log(res.data);
});
},
},
mounted() {
this.$axios({
url: "/",
method: "get",
}).then((res) => {
console.log(res.data);
});
}

运行结果及报错内容

/是可以请求到的，但是/mp3就请求不到，浏览器显示
GET http://localhost:8080/mp3/ 404 (Not Found)
我把url改成/api/mp3也报错，
GET http://localhost:8080/api/api/mp3/ 404 (Not Found)

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

不知道该怎么请求到/MP3

有2个api路径吗？可以用这个路径在浏览器地址栏测试一下

404说明路径是错误的，你看浏览器的network到底是访问路径是啥，是不是做了代理到其他地方了
看浏览器的访问路径，你这么调试基本看不出问题

pathRewrite: {
'^/api': ''
}

去掉这句试试