本文旨在解决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的范围。
