Vercel部署React项目后调用API返回HTML而非数据的问题求助

• 核对API请求路径
  先确认前端调用API的路径是否正确。本地开发时用相对路径（比如/api/news）可能没问题，但部署后如果前后端是分开的Vercel项目，直接用相对路径会被前端路由接管，返回React的index.html。必须改成后端的完整域名路径，比如https://你的后端Vercel域名/api/news。

• 给前端项目加Vercel重写规则
  要是习惯用相对路径调用API，就在前端项目根目录新建vercel.json文件，配置重写规则，把API请求转发到后端：

  {
    "rewrites": [
      {
        "source": "/api/(.*)",
        "destination": "https://你的后端Vercel域名/api/$1"
      }
    ]
  }
  

  这样前端发/api/xxx请求时，Vercel会自动转发到后端对应的接口，不会返回index.html。

• 检查后端CORS配置
  虽然本地正常，但部署后跨域配置可能没适配生产环境。确保后端用CORS中间件允许前端域名访问，比如Express里这么写：

  const cors = require('cors');
  app.use(cors({ origin: 'https://你的前端Vercel域名' }));
  

• 配置前端环境变量
  本地和生产环境的API地址不一样，别硬写死代码里。用React的环境变量，比如在.env.production里设置REACT_APP_API_BASE_URL=https://你的后端Vercel域名/api，然后前端请求时用${process.env.REACT_APP_API_BASE_URL}/news，这样部署后自动用生产地址。

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