本文介绍通过JavaScript读取window.location动态构建跨服务脚本加载路径的方法，解决Apache（9443端口）与Tomcat（8443端口）混合部署时静态资源URL硬编码问题，实现无需修改HTML即可自动适配当前域名和端口的灵活引用。
本文介绍通过javascript读取`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），直接写死URL会导致跨域或路径失效问题——尤其当部署环境从开发（localhost）切换至测试/生产（如 app.example.com）时，手动修改端口和域名极不可靠。
核心思路：利用浏览器原生API动态推导当前上下文，并构造目标资源URL
window.location 对象提供了当前页面的完整地址信息，包括协议（protocol）、主机名（hostname）、端口（port）和路径（pathname）。虽然我们希望忽略当前页面端口（因资源不在同一端口），但仍需保留协议与主机名，并显式指定目标端口（如9443）。关键代码如下：
<!doctype html>
<html lang="tr" dir="ltr">
<head><meta charset="utf-8"></head>
<body style="background-color:black;">
<script>
// 动态提取当前页面基础信息（协议 + 主机名）
const protocol = window.location.protocol; // 包含冒号，如 "https:"
const hostname = window.location.hostname; // 如 "localhost" 或 "app.example.com"
// 显式声明目标服务端口（Apache静态资源服务端口）
const staticPort = 9443;
const staticPath = "app-common/index.js";
// 构建动态脚本URL
const scriptUrl = `${protocol}//${hostname}:${staticPort}/${staticPath}`;
// 创建并注入script标签
const script = document.createElement('script');
script.src = scriptUrl;
script.type = 'text/javascript';
document.head.appendChild(script); // 推荐插入<head>而非<body>，确保执行时机可控
</script>
</body>
</html>✅ 优势说明：
立即学习“前端免费学习笔记（深入）”；
-
零配置适配多环境：开发（
localhost:8443）、测试（test.example.com:8443）、生产（app.example.com:8080）均自动指向app.example.com:9443/app-common/index.js； - 规避CORS风险：因URL协议与主机名与当前页面一致（仅端口不同），且Apache已配置CORS，浏览器视为同源请求；
- 解耦HTML与部署细节：HTML模板不再包含任何硬编码域名或端口，提升可移植性。
⚠️ 注意事项：
- 若目标端口在部分环境需差异化（如开发用9443、生产用443），可结合
hostname做条件判断，或通过<meta>标签注入配置； - 确保Apache服务在目标端口（9443）正确启用HTTPS（若页面为HTTPS），否则会触发混合内容警告；
- 在
index.js内部调用includeJS()等函数时，同样建议复用protocol和hostname变量构造子资源路径，避免二次硬编码； - 首次加载延迟：动态创建
<script></script>标签存在微小延迟，对GWT等依赖立即执行的场景，建议在index.js内做加载状态校验。
综上，该方案以最小侵入方式，将静态资源路径的“决策权”从HTML移交至运行时JavaScript，既保持HTML纯粹性，又赋予其环境感知能力，是微服务化前端部署中的轻量级最佳实践。
