如何使用jQuery/JavaScript/TypeScript获取应用服务器名称？

纯浏览器端运行的JavaScript/TypeScript/jQuery无法直接获取UI部署的应用服务器名称，浏览器的安全沙箱限制了前端代码仅能访问服务器主动返回的内容，服务器主机名不属于默认返回的信息范畴。

下面两种方案都不需要编写额外的服务端业务代码，仅需调整配置即可实现需求：

• 方案1：配置服务器自定义响应头
  你可以直接在部署UI的静态资源服务器（Nginx/Apache/Caddy等）配置中新增一个自定义响应头，写入服务器名称，前端发起请求读取该头即可。
  以Nginx为例，在站点配置中添加如下规则：

  add_header X-UI-Server-Name "your-server-hostname";
  

  前端读取示例代码：

  // 向当前域名发起轻量HEAD请求拿响应头，不会拉取完整页面资源
  fetch('/', { method: 'HEAD' })
    .then(response => {
      const serverName = response.headers.get('X-UI-Server-Name')
      // 渲染到页面对应展示节点
      document.querySelector('#server-display').textContent = serverName ?? '未获取到服务器信息'
    })
  

• 方案2：构建时注入环境变量
  如果你用Vite、Webpack等工程化工具打包UI项目，可以在打包阶段直接把服务器名称作为环境变量注入到产物中，前端直接读取即可，完全不需要调整服务器配置。
  以Vite为例，打包时执行如下命令：

  VITE_UI_SERVER_NAME=your-server-hostname npm run build
  

  前端代码直接读取变量：

  const serverName = import.meta.env.VITE_UI_SERVER_NAME ?? '未获取到服务器信息'
  document.querySelector('#server-display').textContent = serverName
  

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