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

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

理解Connection Refused错误

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

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

解决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 文件中添加以下行：

"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);
});

注意事项：

• 此方法仅适用于开发环境，因为React开发服务器只在开发模式下启用代理。
• 确保你的Express服务器正在运行，并且监听正确的端口（在这个例子中是3001）。

3. 检查防火墙设置

如果CORS配置正确，但仍然遇到问题，请检查你的防火墙设置。确保防火墙允许从外部网络到你的Express服务器端口（例如，3001）的连接。

总结

解决React和Express跨域请求的”net::ERR_Connection_Refused”错误通常涉及以下步骤：

1. 正确配置Express服务器端的CORS设置，允许来自你的React应用的请求。
2. 使用React代理（仅适用于开发环境）来简化请求。
3. 检查防火墙设置，确保允许外部连接到你的Express服务器。

通过仔细检查这些方面，你应该能够解决跨域请求问题，并确保你的React和Express应用在不同的设备上正常工作。记住在生产环境中采取额外的安全措施，例如将CORS origin 设置为你的实际域名。