前后端分离部署后配置代理仍刷新出现404错误求助

问题本质 #

你遇到的刷新404，核心原因是React Router属于客户端路由：首次访问根路径/时，Render静态服务器会返回打包后的index.html，但刷新其他路由（比如/profile）时，Render会去服务器上查找对应路径的物理文件，找不到就返回404。代理配置（vite.config.js里的server.proxy）只作用于开发环境的API请求转发，和这个问题无关；secure: false也解决不了路由刷新的问题。

直接解决方案 #

方法1：添加_redirects文件 #

在Vite项目的public目录下创建_redirects文件（文件名前必须带下划线），写入以下内容：

/* /index.html 200

这个文件会告诉Render的静态服务器：所有路径的请求都返回index.html，交给React Router处理客户端路由。部署时，Vite会自动把public目录下的文件复制到dist文件夹，Render会读取这个规则生效。

方法2：在Render控制台配置重写规则 #

如果不想添加文件，也可以直接在Render的前端项目部署页面操作：

• 进入项目的"Settings"页面
• 找到"Redirects/Rewrites"板块
• 添加一条规则：
  • Source: /*
  • Destination: /index.html
  • Status Code: 200
• 保存后重新部署项目

额外注意事项 #

• 生产环境API请求要写后端完整URL：开发环境的代理配置失效，前端请求后端API时，要直接使用后端在Render的部署地址，比如https://your-backend-service.onrender.com/api/xxx，不能用相对路径。
• 无需强制重定向到根路径：只要配置好上述规则，就能正常保留路由状态，不用把所有链接都定向到/。

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