React应用部署Vercel调用Heroku API报需启用JS错误如何解决

React应用部署到Vercel后发起API调用异常，浏览器开发者工具Network面板中接口响应返回报错：

You need to enable JavaScript to run this app

本地开发环境功能完全正常，重启Heroku后端服务后问题仍存在。
当前package.json中代理配置如下：

"proxy": "https://URL"

接口调用代码示例：

const data = await axios.get("/places")

报错参考截图：

package.json中的proxy字段是Create React App（CRA）开发服务器的专属配置，仅在本地运行npm start启动开发服务时生效，Vercel部署阶段不会读取、也不会实现这个代理规则。
生产环境下发起/places的相对路径请求时，请求会直接发往Vercel托管的当前站点域名下，Vercel匹配不到该路径的接口资源，会触发单页应用的路由回退规则，直接返回React项目的index.html入口文件。浏览器预期接收JSON格式的接口响应，实际拿到了HTML文档，HTML中noscript标签的提示文本就是你看到的报错内容，和Heroku后端服务本身状态无关。

方案1：配置Vercel原生路由重写（推荐，无需修改业务代码） #

在项目根目录创建vercel.json配置文件，添加路径重写规则，将指定路径的请求转发到Heroku后端：

{
  "rewrites": [
    // 匹配所有/places开头的路径，转发到Heroku后端
    {
      "source": "/places/:match*",
      "destination": "https://替换为你的Heroku后端地址/places/:match*"
    },
    // 如果有其他接口路径，可以按同样规则添加，或者统一代理/api前缀的请求
    {
      "source": "/api/:match*",
      "destination": "https://替换为你的Heroku后端地址/api/:match*"
    },
    // 其余所有路径返回React入口文件，保证前端路由正常访问
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

配置完成后提交代码，触发Vercel自动重新部署即可，原有axios调用代码不需要任何修改。

方案2：通过环境变量区分请求基地址 #

如果不想使用Vercel重写规则，可以通过环境变量区分开发、生产环境的接口地址：

1. 在Vercel项目的环境变量配置中，添加REACT_APP_API_BASE_URL，值为你的Heroku后端完整地址（比如https://xxx.herokuapp.com）
2. 封装统一的axios请求实例，自动读取环境变量作为基地址：

// src/utils/request.js
import axios from 'axios'

const request = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL || ''
})

export default request

3. 将原有接口调用替换为使用封装后的实例：

import request from '@/utils/request'
const data = await request.get("/places")

注意：使用该方案需要先在Heroku后端配置CORS跨域规则，允许Vercel部署域名的跨域访问请求，否则生产环境会触发跨域报错。

部署完成后打开浏览器开发者工具的Network面板，查看/places请求的响应信息：

• 如果响应头Content-Type为text/html，说明代理规则未生效，请求仍然打到了前端静态资源服务
• 如果响应头Content-Type为application/json，且返回内容符合接口预期，说明代理配置正常

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