解决React和Express跨域请求Connection Refused问题-js教程-PHP中文网

解决React和Express跨域请求Connection Refused问题

聖光之護

发布： 2025-09-08 16:22:01

原创

1031人浏览过

解决react和express跨域请求connection refused问题

本文旨在帮助开发者解决在React前端（端口3000）和Express后端（端口3001）开发中，当从非本地主机访问时出现的“net::ERR_Connection_Refused”错误。文章将深入探讨CORS配置、代理设置等关键因素，并提供切实可行的解决方案，确保跨域请求的顺利进行。

理解Connection Refused错误

当你在React应用中发起请求到Express后端，并且遇到"net::ERR_Connection_Refused"错误时，这通常意味着你的请求无法连接到目标服务器。在本地开发环境中一切正常，但在其他设备上出现问题，很可能是因为以下几个原因：

服务器未监听外部连接： Express服务器可能只配置为监听本地连接（localhost）。
跨域问题（CORS）： 浏览器阻止从不同源（协议、域名或端口）发起的请求。
防火墙阻止连接： 防火墙可能阻止从外部网络到服务器端口的连接。

解决CORS问题

CORS（Cross-Origin Resource Sharing）是一种安全机制，用于限制Web页面从不同源请求资源。在React和Express应用中，需要正确配置CORS以允许跨域请求。

1. Express服务器端的CORS配置

在你的Express服务器端，你需要设置响应头以允许来自特定源的请求。通常，你会使用 cors 中间件来简化这个过程。

const express = require('express');
const cors = require('cors');
const app = express();

// 允许来自所有源的请求 (不推荐在生产环境中使用)
app.use(cors());

// 或者，允许来自特定源的请求
// const corsOptions = {
//   origin: 'http://localhost:3000' // 你的React应用的地址
// };
// app.use(cors(corsOptions));

app.use(express.json()); // 解析JSON格式的请求体

// 你的路由
app.post('/login', (req, res) => {
  // 处理登录逻辑
  res.json({ message: 'Login successful' });
});

app.listen(3001, () => {
  console.log('Server listening on port 3001');
});

登录后复制

注意事项：

在生产环境中，强烈建议将 origin 设置为你的React应用的实际域名，而不是 *，以提高安全性。
确保在路由处理程序之前使用 cors 中间件。
express.json() 中间件是必须的，否则req.body将无法解析

2. 使用React代理

另一种解决CORS问题的方法是使用React的代理功能。这允许你的React应用将请求发送到与React应用相同的源，然后React开发服务器会将请求代理到你的Express后端。

在你的React项目的 package.json 文件中添加以下行：

豆包AI编程

豆包推出的AI编程助手

1697

查看详情

"proxy": "http://localhost:3001"

登录后复制

然后，在你的React代码中，将请求URL更改为相对路径：

fetch("/login", { // 注意这里是相对路径，不是 "http://localhost:3001/login"
  method: "POST",
  headers: {
    "accept": "application/json",
    "content-type": "application/json"
  },
  body: JSON.stringify({
    em: em,
    pw: pw
  })
})
.then(response => response.json())
.then(data => {
  console.log(data);
});

登录后复制

注意事项：