React应用部署Vercel后刷新/login页面出现Cannot GET /login错误求助

我将React应用部署在Vercel平台后，刷新/login路径的页面时，出现「Cannot GET /login」错误，无法正常显示登录页面。

相关代码 #

index.js 文件代码 #

const connectToMongo = require('./db');
const express = require('express')
var cors = require('cors')

connectToMongo();

const app = express()
const port = process.env.PORT || 5000

app.use(express.json()) // 用于解析请求体中的JSON数据
app.use(cors());

// 可用路由
app.use('/api/auth', require('./routes/auth'));
app.use('/api/notes', require('./routes/notes'));


if (process.env.NODE_ENV === 'production') {
  
  const path = require('path')

  app.get('/', (req, res) => {
    app.use(express.static(path.join(__dirname, 'client', 'build')))
    res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
  });
}

app.listen(port, () => {
  console.log(`iNotebook backend app listening on port ${port}`)
})

vercel.json 文件代码 #

{
    "builds": [
        {
            "src": "./index.js",
            "use": "@vercel/node"

        }
    ],
    "routes": [
        {
            "src": "/.*",
            "dest": "/"
        }
    ]
}

解决方案 #

这是React单页应用(SPA)的典型路由问题：刷新页面时，Vercel的Node服务器没有将前端路由请求转发到React的index.html，导致直接返回404错误。按以下步骤修复：

1. 修改Express服务器配置 #

当前Express仅在访问根路径/时返回index.html，需要调整为所有非API的GET请求都返回index.html，让React Router处理前端路由。修改index.js的生产环境代码块：

if (process.env.NODE_ENV === 'production') {
  const path = require('path')
  // 提前设置静态文件中间件，确保静态资源（CSS、JS等）能被正确加载
  app.use(express.static(path.join(__dirname, 'client', 'build')))
  
  // 匹配所有非API的GET请求，返回React的入口文件index.html
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
  });
}

2. 调整vercel.json路由规则 #

原配置会把所有请求直接转发到根路径，可能影响API路由。更新为优先匹配API路由，再处理前端路由：

{
  "builds": [
    {
      "src": "./index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    // 优先处理API路由，确保接口正常工作
    {
      "src": "/api/(.*)",
      "dest": "/api/$1"
    },
    // 所有其他请求转发到index.html，交给React Router处理
    {
      "src": "/(.*)",
      "dest": "/"
    }
  ]
}

3. 重新部署 #

修改完成后，将代码提交到Vercel重新部署，刷新/login页面即可正常显示登录界面。

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