本文旨在帮助开发者解决在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 文件中添加以下行：
"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”错误通常涉及以下步骤：
正确配置Express服务器端的CORS设置，允许来自你的React应用的请求。使用React代理（仅适用于开发环境）来简化请求。检查防火墙设置，确保允许外部连接到你的Express服务器。
通过仔细检查这些方面，你应该能够解决跨域请求问题，并确保你的React和Express应用在不同的设备上正常工作。记住在生产环境中采取额外的安全措施，例如将CORS origin 设置为你的实际域名。
以上就是解决React和Express跨域请求Connection Refused问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1519552.html
微信扫一扫 
支付宝扫一扫 
