Windows本地服务远程无法访问及React生产部署相关问题咨询

1. 不硬编码服务器IP实现远程访问服务器本地localhost服务 #

远程计算机无法直接访问服务器的localhost环回地址，最通用的无IP配置方案是在IIS层配置反向代理，实现请求同源转发：

• 先为IIS安装两个必需组件：Application Request Routing (ARR)、URL重写模块，安装完成后启用ARR的代理功能
• 在当前React站点下添加URL重写规则：将路径前缀为/api的所有请求，自动转发到服务器本地的http://localhost:5000，规则核心配置参考：

  <rule name="NodeApiProxy" stopProcessing="true">
    <match url="^api/(.*)" />
    <action type="Rewrite" url="http://localhost:5000/{R:1}" />
  </rule>
  

• 前端axios的baseURL直接设置为相对路径/api即可，所有API请求会自动发到当前网站的同源地址，由IIS转发给本地Node服务，全程不需要在代码里写任何服务器IP，同时天然规避跨域问题。

2. 配置Windows服务形式的Node接口供内网计算机访问 #

修改为服务器IP后仍无法访问，按以下优先级排查配置：

• 检查Node服务监听地址：确保服务没有绑定到127.0.0.1环回地址，需要绑定到0.0.0.0（即监听所有网卡的请求），代码层面不要在listen方法中传入127.0.0.1作为绑定主机参数，正确写法示例：

  app.listen(5000, '0.0.0.0', () => console.log('服务已启动'))
  

• 配置Windows Server 2012防火墙入站规则：打开高级安全Windows防火墙面板，新建入站规则，规则类型选「端口」，协议选TCP，特定本地端口填5000，动作为「允许连接」，根据实际网络环境勾选适用的网络配置文件（内网场景勾选域、专用网络即可），保存规则。
• 检查虚拟机网络模式：如果虚拟机使用NAT网络模式，需要在虚拟机网络配置中添加5000端口的端口映射，将宿主机5000端口转发到虚拟机的5000端口；如果是桥接模式，确保客户端计算机可以正常ping通虚拟机的内网IP。
• 额外配置：如果直接通过IP:5000访问接口，需要在Node服务中配置CORS跨域规则，允许前端站点的域名访问，否则浏览器会拦截跨域请求。

3. React生产环境存储API base URL的最佳实践 #

根据部署场景选择对应方案，优先级从高到低：

• 同域部署场景（推荐）：如果用上述反向代理方案把API和前端站点部署在同一个域名下，直接把axios baseURL设置为相对路径/api即可，不需要额外存储任何域名/IP配置，服务器IP、域名变更时不需要改任何前端代码，零维护成本。
• 多环境构建场景：使用脚手架自带的环境变量方案，CRA、Vite等主流脚手架都支持按构建环境加载不同的env文件：
  • 开发环境在项目根目录创建.env.development，写入开发环境的API地址
  • 生产环境创建.env.production，写入生产环境的API地址
  • 注意CRA的环境变量必须以REACT_APP_为前缀，Vite的环境变量必须以VITE_为前缀，构建时工具会自动替换对应值，该方案适合固定环境部署、CI/CD自动构建的场景，缺点是修改配置需要重新执行构建。
• 交付式部署场景（部署后需灵活改配置）：使用运行时配置文件方案：
  • 在项目public目录下创建独立的config.js，将配置挂载到window全局对象：

    window.runtimeConfig = {
      apiBaseUrl: '/api'
    }
    

  • 在public/index.html中优先引入该config.js脚本，业务代码中直接读取window.runtimeConfig.apiBaseUrl作为axios的baseURL即可。
  • 该方案的优势是部署后如果需要修改API地址，直接编辑服务器上的config.js文件，刷新页面即可生效，不需要重新构建项目，适合交付给客户自行部署、多套环境共用构建包的场景。

注意：所有前端存储的配置都是公开可见的，不要把密钥、敏感凭证存在前端配置文件中。

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