React Vite部署Vercel后回调路由出现404错误的解决方法

核心原因 #

Vercel默认会把所有路径请求当作静态资源查找，而你用的createBrowserRouter是前端路由，当Spotify重定向到/callback时，Vercel服务器找不到对应的静态文件，直接返回404，不会交给React处理路由。

解决方案 #

1. 添加Vercel路由重写配置

在项目根目录创建vercel.json文件，写入以下内容：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

这个配置会让Vercel把所有路径的请求都转发到index.html，交给React Router处理前端路由，包括/callback。

2. 确认配置文件被正确部署

• 检查.gitignore或.vercelignore，确保没有排除vercel.json，否则部署时不会上传这个文件。
• 部署后可以在Vercel控制台的「Settings → Rewrites」里看到配置是否生效。

额外排查点 #

• 再次确认Spotify开发者后台的redirect_uri是完全匹配Vercel的HTTPS域名（比如https://project.vercel.app/callback），本地用HTTP但部署后必须用HTTPS，大小写也要一致。
• 检查React Router的注册是否正确，确保你的根组件里用了<RouterProvider router={router} />包裹整个应用。
• 查看Vercel的部署日志，确认vercel.json被加载，日志里会显示Loaded config from vercel.json的提示。

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