部署React应用时fetch请求应使用什么地址替代localhost？

问题表现 #

• 本地开发环境联系表单功能运行正常
• 项目部署到域名https://www.something.com后，站点本身可正常访问，仅联系表单的POST请求无响应
• 保留localhost作为请求地址时，控制台抛出错误：NetworkError when attempting to fetch resource
• 原有问题代码：

fetch('http://localhost:5500/contact', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8',   
  },
  body: JSON.stringify(details),
})

替换规则与实施方案 #

localhost指向当前运行代码的设备本地，部署上线后访问用户的设备上没有运行对应5500端口的后端服务，必然请求失败，按你的部署场景选对应方案即可：

方案1：同域部署用相对路径（优先推荐） #

如果后端接口和前端站点部署在同一个域名下，直接用相对路径作为请求地址，不需要写死域名和端口：

fetch('/contact', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8',   
  },
  body: JSON.stringify(details),
})

该写法会自动适配当前访问域名：本地开发时只需在React项目配置中添加代理规则，将/contact请求转发到本地http://localhost:5500即可；上线后会自动请求https://www.something.com/contact，无需手动切换地址。

本地代理配置参考：

• 基于Create React App搭建的项目，直接在package.json中添加字段："proxy": "http://localhost:5500"
• 基于Vite搭建的项目，在vite.config.js中配置server.proxy规则转发接口请求

方案2：前后端分离部署用环境变量区分地址 #

如果后端接口部署在独立域名/端口下，不要硬编码请求地址，通过环境变量区分不同环境的接口前缀：

• 开发环境配置文件（.env.development）中配置接口前缀：REACT_APP_API_BASE=http://localhost:5500（Vite项目对应变量名前缀为VITE_）
• 生产环境配置文件（.env.production）中配置线上接口前缀：REACT_APP_API_BASE=https://www.something.com（填写后端服务实际部署的地址）
  代码中通过环境变量拼接请求地址：

fetch(`${process.env.REACT_APP_API_BASE}/contact`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8',   
  },
  body: JSON.stringify(details),
})

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