本文介绍如何利用 window.location 动态构建脚本 URL，使 的 src 属性自动适配当前页面所在协议、域名及自定义端口（如 Apache 的 9443），避免硬编码，提升跨服务部署灵活性。
本文介绍如何利用 `window.location` 动态构建脚本 url，使 `<script>` 的 `src` 属性自动适配当前页面所在协议、域名及自定义端口（如 apache 的 9443），避免硬编码，提升跨服务部署灵活性。</script>
在前后端分离或混合部署场景中（例如 Tomcat 承载业务逻辑、Apache 托管静态资源），常需让 HTML 页面从不同端口的服务加载公共 JS 脚本（如 app-common/index.js）。由于 HTML 本身是静态的，无法直接解析变量，必须借助内联 JavaScript 在运行时动态生成 <script></script> 标签并注入 DOM。
核心思路是：读取当前页面的协议（protocol）和主机名（hostname），再拼接预设的静态资源端口与路径，构造完整的跨域可访问 URL。
以下为推荐实现方式（兼容 HTTPS/HTTP，支持 localhost 及生产域名）：
<meta charset="utf-8"><script>
// ✅ 安全提取协议（移除末尾冒号，如 'https:' → 'https'）
const protocol = window.location.protocol.slice(0, -1);
const hostname = window.location.hostname;
const staticPort = 9443; // Apache 静态服务端口（按实际调整）
const staticPath = "app-common/index.js";
// ? 构建动态脚本地址：https://localhost:9443/app-common/index.js
const scriptSrc = `${protocol}://${hostname}:${staticPort}/${staticPath}`;
// ? 创建并注入 script 元素
const script = document.createElement('script');
script.src = scriptSrc;
script.type = 'text/javascript';
script.crossOrigin = 'anonymous'; // 推荐添加，确保 CORS 请求携带凭证（如需）
// ⚠️ 注意：务必在 document.head 或 document.body 可用后执行（此处 body 已存在）
document.body.appendChild(script);
</script>
✅ 关键优势说明：
-
零硬编码域名与协议：自动适配
https://prod.example.com:8443/或http://localhost:8080/等任意部署环境； -
端口完全可控：
staticPort变量集中管理，便于多环境配置（如开发用9443，测试用8443）； -
可扩展性强：生成的
protocol、hostname、staticPort可透传至index.js内部，用于动态加载字体、CSS 或其他子资源（例如includeJS(${protocol}://${hostname}:${staticPort}/lib/utils.js)）； -
符合 CORS 规范：显式设置
crossOrigin属性，避免因跨域脚本引发的Failed to load resource或Access is denied错误。
⚠️ 注意事项：
- 若 Apache 启用了 HTTPS，且证书有效，上述方案可直接工作；若使用自签名证书，请确保浏览器已信任该证书，否则脚本将被拦截；
- 不建议在
中直接执行此逻辑（可能因 DOM 未就绪导致document.body为null），推荐放在底部或包裹在DOMContentLoaded事件中（本例因已声明，故安全）； - 生产环境建议配合构建工具（如 Webpack/Vite）做环境变量注入，但纯前端动态方案在轻量级迁移场景中更简洁可靠。
通过这一模式，你无需修改任何 HTML 模板即可完成 Tomcat（8443）与 Apache（9443）的解耦部署，真正实现“一套 HTML，多环境运行”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
