使用Vite+React时出现AxiosError: Request failed with status code 500问题求助

问题1：Rewrite规则正则语法错误 #

你添加的rewrite规则里正则表达式写错了，正确写法应该把 /^/api/ 改成 /^\/api/——原写法属于语法错误，会导致路径无法被正确重写。如果后端路由是 /songs 而非 /api/songs，未被修改的路径会直接打到后端，触发500错误。

修正后的代理配置：

server: {
  proxy: {
    '/api': {
      target: 'https://localhost:3000',
      changeOrigin: true,
      secure: false,
      rewrite: (path) => path.replace(/^\/api/, '')
    },
  },
}

问题2：Target地址协议不匹配 #

确认你的后端服务是否真的用HTTPS运行？如果后端实际是HTTP服务，把target改成 http://localhost:3000，避免协议不兼容导致请求失败。

问题3：Axios全局配置干扰 #

检查项目中是否全局设置了Axios的baseURL，如果配置了错误的baseURL，会导致相对路径请求被错误拼接。可以在请求前打印默认配置确认：

console.log(axios.defaults.baseURL);

如果有异常，将baseURL重置为 '' 或者 '/' 即可。

问题4：后端路由匹配问题 #

先排除后端本身的问题：直接用Postman或浏览器访问 https://localhost:3000/songs（如果用了rewrite）或者 https://localhost:3000/api/songs（没rewrite），看是否能正常返回数据。如果后端本身返回500，那问题出在后端路由或服务，和前端代理无关。

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