要准确获取当前浏览器的完整域名，直接用 location.host 这个属性即可，它一次性返回协议之外的“主机名+端口号”，是绝大多数场景下最省事的选择。
很多前端新手会混淆 location.host、location.hostname、location.port 这几个属性，导致线上环境出现端口丢失、域名带路径截取错误等问题，下面我把这些属性掰开揉碎，结合我平时踩过的坑，说清楚怎么在不同场景下拿到完整的域名信息。
先搞懂 location 对象里的域名三兄弟
浏览器提供的 window.location 对象里，和域名直接相关的属性就三个：host、hostname、port，它们的区别非常直观，看一个例子就懂。
假设当前访问地址是：https://www.example.com:8080/path/page.html?name=test#anchor
| 属性 | 返回值 | 说明 |
|---|---|---|
location.host |
www.example.com:8080 |
包含主机名和端口号，如果端口是默认端口（http的80、https的443）则不显示端口 |
location.hostname |
www.example.com |
只包含主机名，永远不带端口 |
location.port |
8080 |
只返回端口号字符串，如果是默认端口则返回空字符串 |
行业共识认为,location.host 完整域名”的最直接答案，如果你想在 JS 里获取当前浏览器的完整域名信息，包括端口号，首选 location.host，它精确匹配地址栏里主机部分的内容，不会多也不会少。
为什么有时候完整域名不等于 host？
这里有个容易忽略的细节：location.host 并不包含协议（http/https）。“完整域名”是主机名和端口的组合，协议属于另一个维度。
但在实际开发中,我们经常需要把协议也带上，拼出一个完整的 URL 前缀，这时候不能只靠 location.host，需要自己拼接协议。
最常见的写法：
const fullDomain = location.protocol + '//' + location.host; // 结果：https://www.example.com:8080
注意 location.protocol 返回的值是带冒号的，"https:"，所以中间加 就行。
另一个更简洁的写法是直接用 location.origin：
console.log(location.origin); // 结果：https://www.example.com:8080
看,location.origin 直接返回协议 + 主机名 + 端口号，一步到位，不过要留意，origin 是较新的 API，在 IE10 及以下浏览器里不支持，如果你要兼容老破旧环境，就用 protocol + '//' + host 手动拼接。
本地开发时如何获取当前域名，和线上到底差在哪
很多小伙伴在本地联调时发现,用 location.host
拿到的是 localhost:3000，而线上拿到的是 www.example.com，这就是本地测试与线上环境的天然差异，不能算 bug，但要注意别把本地域名硬编码进代码里。
我遇到过最典型的场景：本地开发环境下，使用 location.host 获取域名赋值给接口地址，结果上线后接口请求全部失败，原因就是代码里写死了 localhost:8080。
正确的做法是,接口地址直接动态读取当前域名，不写死任何环境判断。
const API_BASE = location.protocol + '//' + location.host + '/api';
这样本地环境自动变成 http://localhost:3000/api，线上自动变成 https://www.example.com/api，全程无感适配。
还有一种更严格的场景：如果你配置了 hosts 文件，把 my.dev.com 指向本地，那么访问 http://my.dev.com:3000 时，location.host 返回的就是 my.dev.com:3000，而不是 localhost，这反而更接近线上测试环境，因为完整域名信息是由地址栏真实输入决定的，不是由系统环境决定的。
获取完整域名带端口，端口缺失从哪找原因
有时候你会遇到一种诡异情况：明明地址栏里写了 8080，但 location.host 返回的却只有 example.com，端口不见了。
先别慌,检查两个东西。
第一，你的协议是不是默认端口。 如果协议是 http，端口是 80；协议是 https，端口是 443，这两种情况下浏览器会认为端口是“默认值”，在 host 和 port 属性里直接隐藏掉，比如访问 https://example.com:443，location.host 返回 example.com，location.port 返回空字符串。
第二，你用的是不是 iframe 或者新窗口。 如果你在当前页面里嵌了跨域的 iframe，通过父页面去取子页面的 location.host，跨域限制会直接抛异常，正确的做法是在子页面内部自行获取，然后通过 postMessage 把域名信息传给父页面。
业内专家指出,处理端口问题最稳妥的方式不是猜，而是直接打印 location.port 看看有没有值，如果它返回空字符串，说明当前端口就是默认端口，不需要拼接。
怎么根据域名做逻辑判断，避免踩跨域坑
拿到完整域名之后,常见用途是判断当前环境属于哪个站点，或者决定走哪套逻辑，这时候要特别注意大小写和子域名的干扰。
location.hostname 返回的主机名是全部小写的，而 location.host 里的端口部分不受影响，但主机名部分也会被转成小写，所以比较域名时，直接全小写比较最安全。
举个例子：
if (location.hostname === 'm.example.com') {
// 进入移动端逻辑
}
这种写法在 PC 和移动端都是可靠的，因为 hostname
已经做了小写归一化。
但如果你想判断“是否属于某个父域名”，sub1.example.com 和 sub2.example.com 都要匹配，就不能直接相等比较，而是用 endsWith：
if (location.hostname.endsWith('.example.com')) {
// 属于 example.com 的子域
}
注意 endsWith('.example.com') 有个小坑：它不会匹配 example.com 本身（因为没有点前缀），所以你要是想把主域名也包含进去，写成 location.hostname === 'example.com' || location.hostname.endsWith('.example.com')。
还有一个常见场景：微信内置浏览器里，某些安卓机型会把 location.host 里的端口遮掉，导致签名校验失败，这种情况下，我建议优先从 location.href 里解析域名，虽然麻烦一点，但更接近真实地址栏。
用正则从完整 URL 里提取域名，到底值不值得
有些时候你已经拿到了一个完整的 URL 字符串，比如从后端返回的重定向地址，或者从 location.href 里截取片段，这时候需要通过 JS 从 URL 字符串中解析出完整域名。
我见过有人手写一堆花式正则,但其实有现成的 API 可以用。
new URL() 解析。 这是最推荐的方式，兼容性足够好，代码也简单：
const url = new URL('https://user:pass@example.com:8080/path?query=1');
console.log(url.host); // example.com:8080
console.log(url.hostname); // example.com
console.log(url.port); // 8080
URL 构造函数会把各种边界情况处理好，比如带用户名密码、带锚点、IPv6 地址等，手写正则很难覆盖全这些情况。
创建 <a> 标签来解析。 这是老牌技巧，利用了浏览器原生的 URL 解析能力，兼容性极好，甚至可以兼容 IE：
function getDomainFromUrl(url) {
const a = document.createElement('a');
a.href = url;
return a.host;
}
这个方法妙在不需要正则,不需要关心协议写法，浏览器会帮你解析，唯一的缺点是如果你传入一个相对路径，/api/xxx，host 会拿当前页面的域名。
所以做对比的话,能用 URL 对象就用 URL 对象，性能更好且更直观；需要兼容远古浏览器再考虑 <a> 标签法。
获取完整域名时，这些细节会让你少掉头发
IPv6 地址的域名怎么获取
如果你访问 http://[::1]:8080/ 这种本地 IPv6 地址，location.host 返回的是 [::1]:8080，注意方括号是带上的，hostname 返回的则是 [::1]（带方括号），而 port 返回 8080。
直接拼接 hostname + ':' + port 会得到 [::1]:8080，看起来没问题，但如果你手动 location.hostname + '/' 去拼路径，就会漏掉方括号的语义，所以这种边缘场景下，直接用
location.host 是最稳的。
端口和协议要不要对应
前面说过,默认端口会被隐藏，这其实是一把双刃剑，好处是获取域名时不会得到干扰，坏处是如果你要判断“当前访问的端口是不是 8080”，得先看 location.port 是否为空。
一个小窍门：当你确实需要一个“带端口号的完整域名”时，location.port 为空字符串，可以自己补默认端口：
const port = location.port || (location.protocol === 'https:' ? '443' : '80'); const fullDomainWithPort = location.hostname + ':' + port;
这样得到的结果永远会带端口号,适合需要跟后端配置比对或做日志上报的场景。
一定要用 location.search 还是 location.href？它们和域名没关系
你可能看到一些文章把 location.href 也混进来说获取域名，location.href 是完整 URL，包含路径、查询参数、哈希，根本不是域名，我见过新手用 location.href.split('/')[2] 来取域名，能走通，但一旦地址里缺少双斜杠或协议写法不规范（javascript:void(0)），结果就错得离谱。
获取完整域名的正确思路非常简单：在 location 对象里找带 host 的属性，不要自己去切字符串。location.host 和 location.origin 已经内置了浏览器解析好的结果，比任何手动分割都可靠。
Q&A：js 获取当前浏览器域名的高频问题
问：js 怎么获取当前域名不带端口？
答：用 location.hostname，它只返回纯主机名，永远不会带端口，如果当前域名是默认端口（80 或 443），location.host 也已经去掉了端口，所以这种情况下 location.host === location.hostname。
问：js 获取完整域名带端口，但拿到的总是 null？
答：location.port 只在显式使用了非默认端口时才返回值，如果是默认端口则返回空字符串，不是 null，一行代码验证：console.log(location.port || '默认端口')，如果你的地址没有写端口号，location.host 自然也不会带端口，这符合浏览器设计。
问：跨域 iframe 里怎么获取父页面的完整域名？
答：跨域条件下，子页面直接访问 parent.location.host 会被浏览器拦截并抛出安全错误，唯一可靠的方式是让父页面把自己的域名通过 postMessage 主动传给子页面，或者让子页面从 URL 参数里接收父页面传入的域名参数。
完整域名这件事,记住一个核心原则就够了：能用 location.host 就用 location.host，需要包含协议就用 location.origin，只有想省去端口时才考虑 location.hostname，把这三个属性放在脑子里，以后不管遇到本地联调、线上部署还是跨域问题，你都能在一分钟内找准方向。