本教程旨在解决内网环境下，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 的数据。
