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

本文旨在解决React前端应用（运行在3000端口）与Express后端服务（运行在3001端口）在不同设备上测试时出现的”Connection Refused”错误。通过配置React代理和CORS，并修改fetch请求的URL，可以有效地解决跨域请求问题，确保应用在不同环境下正常运行。

当React前端应用与Express后端服务分别运行在不同的端口（例如，React在3000端口，Express在3001端口）时，在不同设备上进行测试可能会遇到”Connection Refused”错误。这通常是由于浏览器的同源策略限制了跨域请求。以下是解决此问题的步骤和注意事项：

1. 理解问题：跨域请求与同源策略

浏览器的同源策略是一种安全机制，它限制了来自不同源的文档或脚本对彼此资源的访问。源由协议、域名和端口定义。当一个Web应用尝试从与其自身源不同的源请求资源时，就会触发跨域请求。

2. 解决方案：配置React代理

React提供了一种简便的方式来配置代理，允许前端应用将API请求代理到后端服务器。这可以通过在React项目的package.json文件中添加proxy字段来实现。

{
"name": "your-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
// ... other dependencies
},
"scripts": {
// ... other scripts
},
"proxy": "http://localhost:3001"
}

将proxy设置为后端服务器的地址（例如，http://localhost:3001）。 设置完成后，需要重启React开发服务器，使配置生效。

3. 修改Fetch请求

配置React代理后，需要修改前端的fetch请求，将请求URL更改为相对路径。

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

原本的http://localhost:3001/login被替换为/login。React开发服务器会自动将以/开头的请求代理到http://localhost:3001。

4. 后端CORS配置

虽然React代理可以解决开发环境下的跨域问题，但在生产环境中，仍然需要在后端服务器上配置CORS（Cross-Origin Resource Sharing）。

在Express应用中，可以使用cors中间件来配置CORS。

首先，安装cors：

npm install cors

然后，在Express应用中使用cors中间件：

const express = require('express');
const cors = require('cors');
const app = express();
// 允许所有来源的跨域请求 (不推荐用于生产环境)
app.use(cors());
// 或者，更精细的配置：
// app.use(cors({
//   origin: 'http://localhost:3000' // 允许来自 http://localhost:3000 的请求
// }));
// 或者，使用中间件函数自定义CORS
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "http://localhost:3000"); // 允许来自 http://localhost:3000 的请求
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.get('/orders', (req, res) => {
// ...
});
app.post('/login', (req, res) => {
// ...
});
app.listen(3001, () => {
console.log('Server is running on port 3001');
});

注意事项：

• 生产环境CORS配置： 在生产环境中，强烈建议限制Access-Control-Allow-Origin为特定的域名，而不是使用”*”，以提高安全性。
• 请求方法和Header： 如果你的API使用了非标准的HTTP方法（如PUT、DELETE）或自定义的Header，你可能还需要配置Access-Control-Allow-Methods和Access-Control-Allow-Headers。

总结：

通过配置React代理和CORS，可以有效地解决React和Express应用在不同设备上测试时遇到的”Connection Refused”错误。React代理简化了开发环境下的跨域请求处理，而CORS配置则确保了生产环境下的安全性。理解跨域请求和同源策略是解决此类问题的关键。记住，始终在生产环境中采取适当的安全措施，限制CORS的范围。