使用Vite+React配置代理后请求仍指向前端端口致404错误求助

以下是针对你遇到的代理请求仍指向前端端口问题的排查和解决步骤：

1. 重启Vite开发服务器 #

修改vite.config.js后，必须重启Vite服务器才能让新的代理配置生效。很多时候代理不工作就是因为没重启服务，仅刷新页面无法加载新配置。

2. 检查请求路径写法 #

确保你在fetch/axios里使用相对路径发起请求，完整URL会直接绕过代理规则：

• 错误写法（直接访问前端端口）：

  axios.post('http://localhost:3000/api/movies/440/addMovieComment', data)
  

• 正确写法（触发代理转发）：

  axios.post('/api/movies/440/addMovieComment', data)
  

3. 核对代理的rewrite规则 #

你的rewrite配置会把路径开头的/api替换为空：

rewrite: (path) => path.replace(/^\/api/, "")

这意味着前端请求/api/movies/440/addMovieComment会被代理到后端的http://127.0.0.1:5000/movies/440/addMovieComment。

• 如果你的后端接口本身带有/api前缀（比如http://127.0.0.1:5000/api/movies/...），需要修改rewrite规则保留/api：

  // 要么移除rewrite配置，要么修改为不替换/api
  rewrite: (path) => path
  

• 如果后端接口确实没有/api前缀，需确认后端是否存在/movies/440/addMovieComment这个接口，避免后端本身的404错误。

4. 移除package.json里的proxy配置 #

Vite不支持在package.json中配置proxy字段，这个配置是Create React App（CRA）的专属用法，对你的Vite项目无效，直接删除即可。

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