本教程旨在解决内网环境下，react应用通过宿主机访问sql server数据时，其他客户端无法正常获取数据的问题。核心在于理解`localhost`的局限性，并提供两种主要解决方案：一是将前端请求指向宿主机的实际ip地址并配置后端服务，二是利用`ngrok`等工具进行临时性公网暴露。文章将详细阐述配置步骤、注意事项及相关最佳实践，确保数据在内网中可被正确访问。
理解内网数据访问的挑战
在内网环境中部署Web应用时，常会遇到一个普遍的问题：应用在部署机器（宿主机）上运行正常，但其他局域网内的设备访问时却无法获取数据。这通常是由于前端代码中对后端API的调用使用了localhost或127.0.0.1。
localhost或127.0.0.1是一个特殊的网络地址，它始终指向发起请求的当前设备本身。当你的react应用部署在宿主机上，并通过宿主机的IP地址（例如10.xx.101.xx:4000/page）被其他设备访问时，前端代码中的axios.get(‘http://localhost:4000/data’)这条请求，实际上是让访问该页面的客户端设备去请求它自己的localhost:4000/data。如果客户端设备上没有运行对应的后端服务，请求自然会失败，导致数据无法加载。
package.json中的”proxy”: “10.xx.101.xx:4001″配置，主要用于开发环境，它允许开发服务器将未知的请求代理到指定的后端地址，以解决跨域问题。然而，在生产部署后，或者当客户端直接访问前端应用时，axios请求中的硬编码localhost会绕过这个代理设置，直接导致上述问题。
核心解决方案：指向宿主机的实际IP地址
解决这个问题的根本方法是确保前端请求指向运行后端API服务的宿主机的实际IP地址。
1. 修改前端API请求地址
将前端代码中所有对localhost的引用替换为宿主机的实际IP地址和后端API服务的端口。
示例代码修改前：
useEffect(() => { async function getData() { try { let res = await axios({ url: 'http://localhost:4000/data', // 问题所在 method: 'get', timeout: 8000, headers: { 'Content-Type': 'application/json', } }) // ... return res.data } catch (err) { console.error(err); } } getData().then(res => {setSourceData(res)}); },[])
假设你的后端API服务运行在宿主机IP 10.xx.101.xx 的 4001 端口（根据package.json中的proxy配置推断），则应修改为：
示例代码修改后：
// 建议将API基础URL配置为环境变量 const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://10.xx.101.xx:4001'; // 替换为宿主机实际IP和后端端口 useEffect(() => { async function getData() { try { let res = await axios({ url: `${API_BASE_URL}/data`, // 使用宿主机的实际IP和端口 method: 'get', timeout: 8000, headers: { 'Content-Type': 'application/json', } }) // ... return res.data } catch (err) { console.error(err); } } getData().then(res => {setSourceData(res)}); },[])
注意事项：
- 动态配置API URL： 最佳实践是使用环境变量（如process.env.REACT_APP_API_URL）来配置API的基础URL。这样在不同部署环境（开发、测试、生产）下，只需修改环境变量即可，无需改动代码。
- 宿主机IP地址： 确保10.xx.101.xx是你的宿主机在内网中的稳定IP地址。如果宿主机IP可能变化，考虑使用固定的内网域名或DHCP保留IP。
2. 配置后端API服务
确保你的后端API服务（例如基于express.js的node.js应用）不仅监听localhost，还能监听宿主机的网络接口，以便其他设备可以访问。
示例：Express.js后端服务配置
const express = require('express'); const app = express(); const port = 4001; // 你的后端API服务端口 // ... 其他中间件和路由设置 ... app.get('/data', (req, res) => { // 这里是你的SQL Server数据获取逻辑 // ... res.json({ message: 'Data from SQL Server' }); }); // 监听所有可用的网络接口 app.listen(port, '0.0.0.0', () => { console.log(`Backend API listening at http://0.0.0.0:${port}`); });
将app.listen(port, () => { … });改为app.listen(port, ‘0.0.0.0’, () => { … });，这会使Express服务器监听所有可用的网络接口，而不仅仅是localhost。
3. 宿主机防火墙设置
宿主机的防火墙可能会阻止来自其他设备的入站连接。你需要配置防火墙，允许来自内网设备的对后端API服务端口（例如4001）的访问。
- windows系统： 进入“Windows Defender 防火墙” -> “高级设置” -> “入站规则”，添加新规则，允许特定端口的TCP连接。
- linux系统（如ubuntu/centos）： 使用ufw或firewalld工具开放端口。
临时解决方案：使用 Ngrok 暴露本地服务（主要用于公网测试）
虽然直接修改IP地址是内网部署的最佳实践，但如果你需要快速将本地开发服务暴露给外部网络（例如进行演示或测试，尤其是在公网环境下），ngrok是一个非常方便的工具。
Ngrok 工作原理
ngrok可以为你的本地运行的服务创建一个安全的隧道，并生成一个公共的URL。通过这个URL，即使你的服务运行在localhost上，外部网络的用户也能访问到它。
使用 Ngrok 的步骤
-
下载 Ngrok： 访问ngrok.com下载适用于你操作系统的ngrok客户端。
-
解压并配置： 将下载的文件解压到一个目录，并根据提示配置你的认证令牌（authtoken）。
-
启动 Ngrok 隧道： 在命令行中运行以下命令，将你的后端API服务端口（例如4001）暴露出去：
ngrok http 4001
-
修改前端请求： 将前端axios请求中的URL改为ngrok生成的公共URL。
// const API_BASE_URL = 'https://xxxxxxxx.ngrok.io'; // Ngrok生成的URL let res = await axios({ url: `${API_BASE_URL}/data`, // ... })
注意事项：
- ngrok生成的URL每次启动可能会不同，不适合长期或生产环境使用。
- ngrok主要用于将本地服务临时暴露到公网，对于纯内网环境，直接IP地址访问是更稳定和推荐的方案。
- 免费版ngrok的连接有时间限制，且无法自定义域名。
总结与最佳实践
在内网环境中部署应用并确保数据可访问，关键在于正确配置网络路径。
- 明确API地址： 在前端代码中，始终使用宿主机的实际IP地址或内网域名来访问后端API服务，而不是localhost。
- 环境变量： 利用环境变量管理API的基础URL，方便在不同环境间切换。
- 后端服务监听： 确保后端服务监听0.0.0.0或宿主机的特定IP地址，而不是仅限于127.0.0.1。
- 防火墙配置： 开放宿主机防火墙中后端API服务所需的端口。
- CORS策略： 如果前端应用和后端API运行在不同的端口（或未来的不同域名），确保后端配置了正确的CORS（跨域资源共享）策略，允许前端域名进行请求。
- 安全性： 即使在内网，也应考虑API的认证和授权机制，以保护数据安全。
通过以上步骤，你的React应用在内网中的其他设备上将能够顺利访问并显示来自SQL Server的数据。