部署React应用至Netlify时Firefox无法连接localhost:3000求助

排查方向及修复方案 #

1. 代码里硬编码了本地地址 #

搜遍项目所有文件，排查是否存在直接写死localhost:3000的内容——比如API请求、页面跳转、环境变量配置：

• API请求改为相对路径：把fetch('http://localhost:3000/api/xxx')替换成fetch('/api/xxx')，或用环境变量动态配置地址
• 页面跳转避免硬编码本地URL：使用React Router的Link组件或useNavigate钩子，不要直接写window.location.href = 'http://localhost:3000/xxx'

2. 环境变量未区分生产/开发环境 #

检查环境变量配置：

• 开发环境（.env.development）设置REACT_APP_API_URL=http://localhost:3000
• 生产环境（.env.production）替换为你的Netlify站点域名或实际API地址，比如REACT_APP_API_URL=https://your-site.netlify.app
• 同时去Netlify项目设置的「环境变量」面板，确认生产环境变量已正确添加，确保部署时能读取到

3. React Router基础路径配置错误 #

如果使用React Router，生产环境需正确设置basename：

import { BrowserRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter basename={process.env.NODE_ENV === 'production' ? '/你的仓库名' : ''}>
    <App />
  </BrowserRouter>
);

若站点绑定自定义域名或根域名，basename可留空；若从GitHub仓库直接部署（URL带仓库名），则填写仓库名称

4. 未配置Netlify重写规则 #

单页应用必须配置重写规则，否则刷新页面会出现404，也可能引发路由跳转异常。在项目根目录创建netlify.toml文件，添加以下内容：

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

提交该文件到仓库后重新部署即可

5. 浏览器缓存导致的旧代码残留 #

旧代码被浏览器缓存时，会出现跳转异常问题：

• 强制刷新页面（Windows按Ctrl+Shift+R，Mac按Cmd+Shift+R）
• 清除浏览器缓存后重新访问站点

先本地验证再部署 #

先在本地构建生产版本：运行npm run build，再用serve -s build启动预览。如果本地预览也跳转localhost，说明问题出在代码本身，先在本地修复后再部署，避免反复推送Netlify浪费时间

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