解决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。

刺鸟创客

一款专业高效稳定的AI内容创作平台

42

查看详情

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的范围。