React应用IIS部署后其他PC无法获取Node.js后端数据求助

以下是按优先级排序的排查和解决步骤：

1. 修正API请求地址配置 #

本地开发时，Axios可能使用localhost或127.0.0.1作为后端地址，但其他PC访问时，这个地址指向的是它们自己的本地机器，而非部署后端的服务器。

• 打开React项目的环境配置文件（比如.env.production），将Axios的baseURL改为后端服务器的局域网IP或主机名，例如：

  // 示例：后端服务器局域网IP为192.168.1.100，端口3000
  axios.defaults.baseURL = 'http://192.168.1.100:3000/api';
  

• 重新构建React项目并部署到IIS，确保生产环境使用的是正确的API地址。

2. 验证后端服务的可访问性 #

先跳过前端，直接用其他PC的浏览器/Postman访问后端API（比如http://服务器IP:3000/api/你的接口路径），如果无法返回数据，按以下步骤排查：

• 检查Express监听地址：确保后端服务监听的是0.0.0.0，而非仅本地的127.0.0.1，这样才能接受局域网内其他设备的请求：

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

• 开放服务器防火墙端口：在部署后端的服务器上，进入Windows防火墙，添加入站规则，放行后端服务使用的端口（比如3000），允许局域网内的连接请求。

3. 配置CORS跨域权限 #

前端部署在IIS（通常是80/443端口），后端在另一个端口，属于跨域请求，必须在Express中配置CORS：

• 安装cors依赖：

  npm install cors
  

• 在Express入口文件中启用CORS，指定允许的前端来源（生产环境尽量避免用*）：

  const cors = require('cors');
  // 允许来自IIS前端的请求
  app.use(cors({
    origin: 'http://服务器IP:前端端口', // 比如http://192.168.1.100:80
    credentials: true // 如果需要携带Cookie等凭证，开启此项
  }));
  

4. 配置IIS反向代理（可选，优化跨域和端口暴露） #

如果不想暴露后端端口，可以通过IIS的反向代理将前端的API请求转发到后端，实现同源访问：

• 先安装IIS的两个模块：URL重写和应用程序请求路由（ARR）。
• 在IIS站点的web.config中添加重写规则：

  <configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="ProxyAPI" stopProcessing="true">
            <match url="api/(.*)" />
            <action type="Rewrite" url="http://localhost:3000/api/{R:1}" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>
  

• 此时React的AxiosbaseURL可以设为/api，无需指定服务器IP和端口，IIS会自动将请求转发到后端。

5. 检查SQL Server的远程访问（如果后端连接的是远程SQL Server） #

如果后端连接的是另一台机器上的SQL Server，需确保：

• SQL Server已开启远程连接（在SQL Server配置管理器中启用TCP/IP协议）。
• SQL Server防火墙开放1433端口，允许后端服务器的连接请求。
• 后端使用的SQL登录账号具备足够的数据库访问权限。

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