本文旨在解决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 的请求// }));// 或者，使用中间件函数自定义CORSapp.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的范围。
以上就是解决React和Express跨域请求时Connection Refused问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1519556.html
微信扫一扫 
支付宝扫一扫 
