本文介绍如何利用window.location对象动态构建跨端口静态资源（如JS文件）的加载路径，避免硬编码域名和端口，实现Apache（9443）与Tomcat（8443）混合部署下的灵活资源引用。
本文介绍如何利用window.location对象动态构建跨端口静态资源（如js文件）的加载路径，避免硬编码域名和端口，实现apache（9443）与tomcat（8443）混合部署下的灵活资源引用。
在前后端分离或动静分离架构中，常将静态资源（JS、CSS、字体等）托管于独立Web服务器（如Apache），而动态应用运行于应用服务器（如Tomcat）。当两者监听不同HTTPS端口（如Apache:9443、Tomcat:8443）时，HTML页面若直接通过相对路径引用静态脚本（如<script src="../app-common/index.js"></script>），会因同源策略失败——浏览器将尝试从当前Tomcat端口（8443）加载资源，而非Apache端口（9443）。
解决方案是在HTML中内联一段轻量JavaScript，动态生成指向正确端口的<script></script>标签，完全绕过静态HTML的局限性。核心逻辑基于window.location对象获取当前页面协议、主机名，并显式拼接目标端口与路径：
<!doctype html>
<html lang="tr" dir="ltr">
<head><meta charset="utf-8"></head>
<body style="background-color:black;">
<script>
// 从当前页面URL提取基础信息
const protocol = window.location.protocol.replace(/:$/, ''); // 如 "https"
const hostname = window.location.hostname; // 如 "localhost"
const staticPort = 9443; // Apache静态服务端口
const staticPath = "app-common/index.js"; // 静态资源路径
// 动态构造完整URL
const scriptSrc = `${protocol}://${hostname}:${staticPort}/${staticPath}`;
// 创建并插入script标签
const script = document.createElement('script');
script.src = scriptSrc;
script.type = 'text/javascript';
document.head.appendChild(script); // 推荐插入head，避免阻塞body渲染
</script>
</body>
</html>✅ 关键优势：
- 完全免硬编码：同一HTML可无缝部署于任意域名/端口的Tomcat实例；
- 端口可配置：只需修改
staticPort变量，即可切换至其他静态服务端口（如测试环境用8080）；- 兼容HTTPS/HTTP：自动继承当前页面协议，规避混合内容警告；
- 可扩展性强：
protocol、hostname、staticPort等变量可在后续加载的index.js中复用，用于动态引入其他资源（如CSS、字体、子模块JS）。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 确保Apache已正确配置CORS头（如
Access-Control-Allow-Origin: *或指定域名），否则跨端口请求将被浏览器拦截； - 若需支持IPv6地址或特殊主机名（含端口），建议对
hostname做进一步校验； - 生产环境应添加错误处理，例如监听
script.onerror事件并降级提示； - 避免在
document.write()中动态写入script——它会阻塞解析且不推荐使用。
通过此方案，你无需修改任何后端配置或构建流程，仅用几行前端代码，即可实现静态资源服务的解耦与动态路由，显著提升多环境部署的灵活性与可维护性。
