Netlify部署结合Heroku后端时如何避免CORS并正确配置代理

package.json 中的 proxy 字段是仅作用于 React 本地开发服务器的特性，仅在你本地执行 npm start 启动开发服务时生效。当你执行 npm run build 构建生产包时，该配置会被完全忽略。Netlify 上托管的是静态构建产物，没有开发服务器帮你做请求转发，因此你写的 axios.get('/api/users') 会直接请求 Netlify 域名下的 /api/users 路径，自然无法匹配到 Heroku 上的后端接口。

• 方案1：使用 Netlify 重定向规则（适配你当前的请求写法） #

  在 React 项目的 public 目录下新建名为 _redirects 的无后缀文件，写入以下规则：

  /api/*  https://madevmeet.herokuapp.com/api/:splat  200
  

  该规则会把 Netlify 上所有 /api 开头的请求自动转发到你的 Heroku 后端地址，和本地 proxy 的效果完全一致，重新部署前端即可正常访问。

• 方案2：使用分环境的 API 地址变量（通用适配所有部署平台） #

  用环境变量区分开发和生产环境的接口地址，不依赖特定平台的特性：
  1. 在项目根目录新建 .env.development 和 .env.production 两个文件
  2. .env.development 中写入：REACT_APP_API_URL=http://localhost:5001
  3. .env.production 中写入：REACT_APP_API_URL=https://madevmeet.herokuapp.com
  4. 将所有请求调用改回：axios.get(${process.env.REACT_APP_API_URL}/api/users)

• 后端 CORS 配置校验 #

  如果你用 cors 包处理跨域，确保后端配置正确生效：

  const cors = require('cors');
  // 开发环境可以直接允许所有请求，生产环境建议限定origin为你的Netlify域名
  app.use(cors());
  

  修改配置后重新部署 Heroku 后端服务。

为了避免接口请求失败直接导致页面崩溃，所有调用数组 map 方法的位置补充空值判断：

// 原写法
userList.map(item => <div>{item.name}</div>)
// 修改为
userList?.map(item => <div>{item.name}</div>) || []

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