本文旨在解决React应用在内网部署时，前端使用`localhost`地址请求数据导致其他客户端无法访问后端服务的问题。我们将深入分析`localhost`的局限性，并提供使用`ngrok`进行快速测试的方案，同时详细阐述如何在生产环境中配置后端服务和前端请求，确保数据在多台机器间稳定、安全地传输。
1. 理解localhost在内网环境中的局限性
当您在本地开发React应用时，localhost通常指向您自己的机器（127.0.0.1）。在单机环境下，前端应用（例如运行在http://localhost:3000）通过axios请求http://localhost:4000/data时，实际上是在向同一台机器上运行的后端服务发送请求。
然而，当您将React项目部署到内网，并通过主机的IP地址（例如http://10.xx.101.xx:4000/page）供其他PC访问时，问题便出现了。其他客户端浏览器在加载页面后，执行useEffect中的axios请求时，http://localhost:4000/data中的localhost不再指向您的主机，而是指向客户端自身的机器。这意味着，如果客户端机器上没有运行后端服务，或者服务没有在端口4000上监听，请求就会失败，导致数据无法加载。
示例代码中的axios调用：
useEffect(() => { async function getData() { try { let res = await axios({ url: 'http://localhost:4000/data', // 问题根源：硬编码的localhost method: 'get', timeout: 8000, headers: { 'Content-Type': 'application/json', } }) // ... } catch (err) { console.error(err); } } getData().then(res => {setSourceData(res)});},[])
此外，package.json中的”proxy”: “10.xx.101.xx:4001″配置通常用于开发环境，让React开发服务器将对未知路径的请求转发到指定的后端地址，以解决跨域问题。但在生产构建中，这个proxy配置不会生效，前端代码中的axios请求会直接从客户端浏览器发出。
2. 快速测试方案：使用ngrok暴露本地服务
对于快速测试或演示，ngrok是一个非常方便的工具，它可以创建一个安全的隧道，将您本地机器上的服务暴露到公共互联网（或在内网中提供一个可访问的URL）。
工作原理：ngrok会在您的本地机器和ngrok云服务之间建立一个隧道。当其他用户访问ngrok生成的公共URL时，请求会通过ngrok云服务转发到您的本地机器上正在运行的服务。
使用步骤：
下载并安装ngrok： 访问ngrok官网下载对应操作系统的版本。启动您的后端服务： 确保您的Express后端服务正在主机上运行，例如在端口4000或4001。使用ngrok暴露服务： 打开命令行工具，运行以下命令（假设您的后端服务在端口4000）：
ngrok http 4000
ngrok会生成一个类似https://xxxxxxxx.ngrok.io的公共URL。
修改前端请求地址： 将React前端代码中的http://localhost:4000/data替换为ngrok生成的公共URL（例如https://xxxxxxxx.ngrok.io/data）。重新部署/刷新： 重新构建并部署您的React应用，或者在开发模式下刷新页面，其他用户即可通过新的ngrok URL访问数据。
注意事项：
ngrok主要用于开发、测试和演示，不适合生产环境。生成的URL是临时的，且依赖于ngrok服务。免费版ngrok的隧道在会话结束后会失效，需要重新启动并获取新的URL。
3. 生产环境下的稳定解决方案
在生产环境中，我们需要确保后端服务可以通过主机的实际网络地址被其他机器访问。这通常涉及以下几个关键步骤：
3.1 配置后端服务监听所有网络接口
您的Express后端服务需要配置为监听所有可用的网络接口，而不仅仅是localhost。通过监听0.0.0.0，您的服务将可以通过主机的任何IP地址（包括内网IP）被访问。
后端 (Express) 配置示例：
const express = require('express');const app = express();const port = 4000; // 您的后端服务端口// ... 其他中间件和路由配置 ...app.listen(port, '0.0.0.0', () => { // 监听所有网络接口 console.log(`Backend server listening at http://0.0.0.0:${port}`); console.log(`Access via local IP: http://${require('os').networkInterfaces().en0[1].address}:${port}`); // macOS example // 在Windows或Linux上，您可能需要使用不同的方式获取当前机器的内网IP});
获取主机内网IP地址的提示：
Windows: 在命令行运行 ipconfig，查找“IPv4 地址”。macOS/Linux: 在命令行运行 ifconfig 或 ip a，查找您的网络接口（如en0或eth0）对应的inet地址。
3.2 修改前端API请求地址
一旦后端服务配置为通过主机的内网IP地址可访问，前端应用就需要将所有对localhost的请求替换为该内网IP地址。
前端 (React) API 配置示例：
最佳实践是使用环境变量来管理API的基础URL，以便在开发和生产环境中使用不同的配置。
定义环境变量：在项目根目录创建.env文件（或.env.production用于生产环境）：
# .env.developmentREACT_APP_API_BASE_URL=http://localhost:4000# .env.productionREACT_APP_API_BASE_URL=http://10.xx.101.xx:4000 # 替换为您的主机实际内网IP和后端端口
在React应用中，环境变量需要以REACT_APP_开头才能被识别。
在前端代码中使用环境变量：
// 在您的React组件中useEffect(() => { async function getData() { try { let res = await axios({ // 使用环境变量来构建完整的API URL url: `${process.env.REACT_APP_API_BASE_URL}/data`, method: 'get', timeout: 8000, headers: { 'Content-Type': 'application/json', } }) if(res.status == 200){ console.log(res.status) } return res.data } catch (err) { console.error(err); } } getData() .then(res => {setSourceData(res)});},[])
当您运行npm start时，会使用.env.development中的变量。当您运行npm run build时，如果存在.env.production，则会使用其中的变量，否则会使用默认的生产环境变量。
3.3 防火墙配置
确保主机上的防火墙允许来自其他内网机器的入站连接到您的后端服务端口（例如4000）。
Windows: 打开“Windows Defender 防火墙”，创建“入站规则”，允许特定端口（如4000）的TCP连接。Linux (ufw): sudo ufw allow 4000/tcpmacOS: “系统设置” -> “网络” -> “防火墙” -> “选项” -> 允许您的Node.js/Express应用入站连接。
3.4 域名解析 (可选，但推荐)
如果您的内网环境有DNS服务器，或者您希望提供更友好的访问方式，可以为主机配置一个内网域名（例如http://myserver.local:4000），然后让前端请求该域名而不是直接的IP地址。这样，即使主机的IP地址发生变化，只需更新DNS记录即可，前端代码无需修改。
4. 总结与最佳实践
解决内网React应用的数据访问问题，核心在于正确处理网络地址。localhost仅限于本地机器，跨机器访问需要使用实际的网络IP地址或可解析的域名。
关键点回顾：
理解localhost： 它始终指代发出请求的客户端机器本身。后端监听： 确保您的后端服务监听在0.0.0.0（所有网络接口）或主机的特定内网IP上。前端配置： 修改前端axios请求中的URL，使用主机的实际内网IP地址或域名。强烈建议使用环境变量来区分开发和生产环境的API地址。防火墙： 检查并配置主机防火墙，允许其他机器访问后端服务端口。ngrok： 作为临时的测试工具非常有用，但不适用于生产环境。
通过遵循这些步骤，您的React应用将能够在内网环境中稳定地从后端SQL Server获取数据，为所有用户提供无缝的体验。
以上就是解决内网React应用中localhost引起的跨机器数据访问问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538356.html
微信扫一扫 
支付宝扫一扫 
