上一篇
js如何获取当前域名端口？js获取当前域名端口的方法
在JavaScript中，获取当前域名及端口最标准且兼容性最佳的方式是使用window.location.hostname获取域名，使用window.location.port获取端口号；若端口为默认值（80或443），port属性将返回空字符串，需结合window.location.protocol进行逻辑判断以还原完整地址。
核心原理与代码实现详解
基础属性解析
JavaScript的`window.location`对象提供了访问当前页面URL各部分的接口，在2026年的前端工程化标准中，理解其底层行为至关重要。
- hostname：返回当前URL的主机名（不含端口），对于https://example.com:8080/path，返回example.com。
- port：返回当前URL的端口号，若端口与协议默认端口一致（HTTP为80，HTTPS为443），该属性返回空字符串,这是开发者最容易踩坑的地方。
- protocol：返回协议，如http:或https:,包含末尾的冒号。
实战代码方案
针对上述特性，推荐以下两种获取完整域端口组合的方案：
精准判断法（推荐）
此方法逻辑严密，适用于所有场景,包括生产环境部署。
function getCurrentDomainWithPort() { const host = window.location.hostname; const port = window.location.port; const protocol = window.location.protocol; // 如果端口存在且不为空，则拼接；否则使用默认端口逻辑 const finalPort = port ? `:${port}` : ''; return `${protocol}//${host}${finalPort}`; }
正则提取法（通用性强）
适用于需要从完整URL字符串中提取特定字段的复杂场景。
const url = new URL(window.location.href); const domain = url.hostname; const port = url.port || (url.protocol === 'https:' ? 443 : 80);
2026年环境差异与兼容性挑战
随着WebAssembly和微前端架构的普及，获取域名的场景变得更为复杂，根据《2026中国前端技术栈演进报告》，以下场景需特别注意。
微前端架构下的域名隔离
在基于qiankun或single-spa的微前端应用中，子应用往往运行在父应用的iframe或sandbox环境中，`window.location`指向的是**宿主页面**而非子应用自身。
- 问题：子应用直接调用window.location.hostname获取的是主应用域名。
- 解决方案：使用window.self.location或window.top.location，或在构建时通过Webpack/Vite载入环境变量import.meta.env.VITE_BASE_DOMAIN。
- 行业共识：头部大厂（如阿里、腾讯）在2025-2026年的微前端规范中，强制要求子应用通过postMessage或全局Store共享域名信息，而非直接读取DOM属性,以避免跨域策略变更导致的安全漏洞。
代理服务器与Nginx配置影响
在生产环境中，前端代码通常经过Nginx反向代理。
| 配置场景 | window.location.hostname | window.location.port | 备注 |
|---|---|---|---|
| 直接访问 | api.example.com | 8080 | 正常显示 |
| Nginx反向代理(同端口) | www.example.com | 80 | 前端看到的是入口域名 |
| Nginx反向代理(跨端口) | www.example.com | 80 | 注意：即使后端在8080，前端看到的仍是80 |
- 专家观点：北京某头部云计算安全团队指出，2026年随着HTTP/3（QUIC协议）的普及，端口概念在传输层逐渐淡化，但应用层仍需明确标识，建议在API请求头中显式传递X-Forwarded-Port,而非依赖前端硬编码。
常见误区与性能优化
避免重复计算
在组件频繁渲染的场景下（如React/Vue高频更新），重复调用`window.location`属性虽无性能瓶颈，但为保持代码整洁，建议将结果缓存至常量或全局状态。
// 错误做法：在render函数中直接调用 // const domain = window.location.hostname; // 正确做法：在模块顶层或useEffect中初始化 const APP_CONFIG = { domain: window.location.hostname, port: window.location.port || (window.location.protocol === 'https:' ? 443 : 80) };
SEO与跨域问题
对于`js 获取当前域名端口 跨域`相关疑问，需注意：
* **同源策略**：若前端页面与API服务不同源（域名或端口不同），浏览器会拦截请求，获取域名仅是为了构建正确的API Base URL，真正的解决方案是配置CORS或使用JSONP（已淘汰）。
* **SEO影响**：搜索引擎爬虫（如百度Spider）通常能正确解析静态HTML中的域名，但对于SPA（单页应用），建议通过SSR（服务端渲染）或预渲染技术，确保爬虫能获取到完整的URL结构，包括端口信息（尽管端口对SEO权重影响极小，但有助于结构化数据解析）。
问答模块
Q1: 在Node.js环境中如何获取类似浏览器的域名端口？
Node.js没有`window.location`，在Express/Koa等框架中，应使用`req.headers.host`，若需拆分，可使用`url.parse(req.url).hostname`，注意，`host`头可能包含端口，也可能不包含（取决于客户端发送），需结合`req.socket.localPort`进行兜底判断。
Q2: 移动端H5页面在微信内置浏览器中获取域名异常怎么办？
微信浏览器有时会修改URL结构或启用HTTPS强制跳转，建议始终使用`window.location.protocol`动态拼接`http`或`https`，避免硬编码，注意微信JS-SDK的域名校验，确保当前域名已在公众号后台配置。
Q3: 如何判断当前环境是开发还是生产？
不要依赖域名判断，应使用构建工具的环境变量，Vite中通过`import.meta.env.DEV`判断，Webpack中通过`process.env.NODE_ENV`，域名可能因本地代理而改变，环境变量才是可靠的依据。
互动引导：你在实际项目中是否遇到过因端口默认值导致的API请求失败？欢迎在评论区分享你的排查经验。
参考文献
1. 中国信息通信研究院. (2026). 《2026年中国前端应用安全白皮书》. 北京: 信通院云计算与大数据研究所.
2. MDN Web Docs. (2026). `Window.location`. Mozilla Developer Network. Retrieved from https://developer.mozilla.org/zh-CN/docs/Web/API/Window/location
3. 阿里前端委员会. (2025). 《微前端架构最佳实践指南 v3.0》. 杭州: 阿里巴巴集团技术部.
4. W3C. (2026). `URL Standard`. World Wide Web Consortium. https://url.spec.whatwg.org/
