内网React项目跨PC无法获取SQL Server数据的问题求助

核心问题分析 #

1. 前端请求地址错误：你在axios中硬编码了http://localhost:4000/data，其他用户访问时，localhost会指向他们自己的本地电脑，而非部署项目的主机，导致请求无法到达你的后端服务。
2. 端口与代理配置混淆：前端服务运行在4000端口，但package.json的proxy指向10.xx.101.xx:4001，需确认后端Express服务确实运行在4001端口。

具体解决方案 #

方案1：使用相对路径+代理转发（推荐）

将axios请求地址改为相对路径，利用proxy配置自动转发到后端服务，避免硬编码IP的问题。

修改前端请求代码：

useEffect(() => {
    async function getData() {
        try {
           let res = await axios({
                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)});
},[])

确认proxy配置有效性：
确保你的后端Express服务确实运行在10.xx.101.xx:4001，此时前端请求/data会被自动转发到http://10.xx.101.xx:4001/data。

方案2：直接使用主机IP请求（需处理跨域）

如果不想依赖proxy，可以直接将请求地址改为主机IP+后端端口，但需要给后端配置跨域权限。

1. 修改前端请求代码：

useEffect(() => {
    async function getData() {
        try {
           let res = await axios({
                url: 'http://10.xx.101.xx:4001/data', // 替换为你的主机IP+后端端口
                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)});
},[])

2. 给Express后端添加跨域支持：
   安装cors依赖：

npm install cors

在后端代码中启用cors：

const cors = require('cors');
const app = require('express')();

app.use(cors()); // 允许所有跨域请求

额外必查项 #

• 防火墙端口开放：确保部署主机的防火墙开放了4000（前端）和4001（后端）端口，允许内网其他设备访问。
• 后端监听地址设置：Express服务需监听0.0.0.0而非localhost，否则仅本机能访问后端服务：

app.listen(4001, '0.0.0.0', () => {
    console.log('后端服务运行在 http://0.0.0.0:4001');
});

内容的提问来源于stack exchange，提问作者Carson