React+Express跨主机测试时出现Connection Refused问题求助

核心问题：硬编码localhost导致跨设备访问失败 #

你前端代码里的fetch("http://localhost:3001/login")是硬编码了本地地址，当其他电脑访问你的React前端时，localhost会解析成访问者自己的电脑，而不是运行Express后端的那台MacBook，自然会出现连接拒绝。这是最根本的原因，和CORS无直接关联。

解决步骤 #

1. 替换前端API地址为后端Mac的局域网IP #

• 先在Mac上获取局域网IP：打开终端输入ifconfig，找到en0或en1网卡下的inet值（比如192.168.1.100）。
• 修改前端fetch代码，把http://localhost:3001替换为Mac的局域网IP地址：

fetch("http://192.168.1.100:3001/login", {
      method: "POST",
      headers: {
        "accept": "application/json",
        "content-type": "application/json"
      },
      body: JSON.stringify({
        em: em,
        pw: pw
      })
})
.then(...)

2. 修复CORS配置冲突 #

你的server.js同时使用了自定义CORS中间件和cors()包，会导致配置冲突：

• 删除自定义的CORS代码段，统一使用cors包配置，比如允许前端所在的局域网地址：

const cors = require('cors');
// 允许来自React前端的请求（包含本地和局域网地址）
app.use(cors({
  origin: ['http://localhost:3000', 'http://你的Mac局域网IP:3000'],
  credentials: true // 需要携带cookie等凭证时开启
}));

• 测试阶段可临时用origin: "*"允许所有来源，生产环境请勿使用。

3. 正确使用React的proxy配置 #

你package.json里的"proxy": "https://localhost:3001"存在两个问题：

• 协议错误：后端用的是HTTP，应改为"http://localhost:3001"。
• proxy的作用是开发阶段让React开发服务器转发请求到后端，此时前端可以用相对路径请求API，比如fetch("/login")，无需写完整地址，但这个配置仅在同一台机器开发时生效，跨设备访问仍需使用后端真实IP。

若想利用proxy简化开发，修改前端fetch为相对路径：

fetch("/login", {
  // 其他配置保持不变
})

4. 确保Mac防火墙允许3001端口访问 #

打开「系统设置」-「网络」-「防火墙」，确认允许Node.js或你的Express应用接收局域网连接，可临时关闭防火墙测试是否是此问题导致。

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