如何在HTML中动态生成脚本URL适配不同端口部署

这段内容主要讲解：如何借助 Ja vaScript 读取 window.location，动态生成跨服务的脚本加载 URL，从而解决 Apache（9443 端口）与 Tomcat（8443 端口）混合部署场景下静态资源地址被硬编码带来的问题。通过这种方式，无需频繁修改 HTML，就能让资源引用自动匹配当前访问的域名与端口，使脚本加载方式更加灵活、稳定。

本文介绍如何通过 Ja vaScript 读取 window.location，动态拼接跨服务脚本加载路径，解决 Apache（9443 端口）与 Tomcat（8443 端口）混合部署时静态资源 URL 硬编码的问题，从而实现无需改动 HTML 页面，也能自动适配当前域名和端口的资源引用方案。

在前后端分离或混合部署架构中，这类问题非常常见：静态资源，如 JS、CSS、字体文件，通常会统一部署在独立的 Web 服务器上，例如 Apache；而真正处理业务逻辑和页面输出的，则往往是应用服务器，例如 Tomcat。问题就在于，如果 HTML 页面由 Tomcat 提供，比如 https://localhost:8443/，但公共脚本文件，例如 index.js，实际部署在 Apache 上，例如 https://localhost:9443/app-common/index.js，那么一旦把资源地址直接写死，就很容易带来部署风险：要么出现跨域加载问题，要么在环境切换后路径失效。尤其当部署环境从开发机 localhost 切换到测试环境或生产环境，例如 app.example.com，再依赖手动修改域名与端口，不仅效率低，也容易出错。

核心思路：利用浏览器原生 API 动态识别当前访问环境，并构造目标脚本资源 URL

window.location 对象提供了当前页面完整的地址信息，包括协议（protocol）、主机名（hostname）、端口（port）和路径（pathname）。在这个场景中，我们通常需要忽略当前页面端口（因为静态资源并不部署在同一端口），但保留当前访问使用的协议与主机名，同时手动指定目标服务端口（例如 9443），再拼接出正确的脚本地址。关键代码如下：

✅ 方案优势：

• 自动适配多种部署环境：无论是开发环境（localhost:8443）、测试环境（test.example.com:8443）还是生产环境（app.example.com:8080），都可以根据当前访问域名自动生成对应的静态资源地址，无需反复修改 HTML；
• 减少硬编码带来的维护成本：页面模板不再写死域名、端口和资源路径，后续迁移环境或调整服务端口时更省心；
• 提升部署灵活性：HTML 与实际部署细节解耦，资源引用逻辑交由运行时处理，更适合多环境、多服务的项目结构。

⚠️ 使用注意事项：

• 如果不同环境使用的目标端口并不一致（例如开发环境用 9443、生产环境用 443），可以结合 hostname 做条件判断，或通过 标签、配置文件注入端口信息；
• 如果当前页面使用 HTTPS，那么 Apache 在目标端口（如 9443）也必须正确启用 HTTPS，否则浏览器会触发混合内容告警，导致脚本加载失败；
• 如果 index.js 内部还会继续加载其他 JS 或静态资源，同样建议复用 protocol 和 hostname 来动态拼接子资源路径，避免再次出现硬编码问题；
• 动态创建