JS当前域名怎么获取？，获取当前域名怎么做

js 获取当前域名, 直接读 window.location.hostname 就能拿到纯域名, 想要带端口就取 window.location.host, 想要完整地址就用 window.location.origin。

这里先亮出结论,接下来拆开讲讲这三个属性的区别, 以及在实际项目里怎么用、怎么封装、怎么避开那些容易翻车的坑。

js 获取当前域名的基础方法与适用场景

天天跟浏览器打交道, 你会发现 location 这个对象就像是个随身携带的身份证, 当前页面在哪个域名下、走什么协议、有没有端口, 它都记得清清楚楚，不过很多人拿到手之后, 经常分不清该用哪个属性。

javascript 获取当前域名是什么?先说结论

用 javascript 获取当前域名是什么 这个说法在搜索引擎里搜出来的答案五花八门, 其实核心就一句话: 域名就是地址栏里主机名部分，假设网址是 https://shop.example.com:8080/goods/detail?id=1,

• window.location.hostname 返回 shop.example.com
• window.location.host 返回 shop.example.com:8080
• window.location.origin 返回 https://shop.example.com:8080
• window.location.protocol 返回 https:

注意 hostname 不含端口, host 含端口, 这是最容易记混的地方。

location 对象的属性对比

很多前端新手搞不清 host、hostname、origin 的区别, 下面这张表直接帮你理清:

再补一个容易忽略的点, 如果页面用的是默认端口 80 或 443, location.port 返回的是空字符串, 判断端口时千万留意。

具体场景怎么选

• 要做域名白名单校验, 比如只允许 example.com 下的页面运行脚本, 用 window.location.hostname 最干净。
• 要拼接带端口的接口地址, 直接拿 window.location.host 来用。
• 要动态生成分享链接或者回调 URL, window.location.origin 一步到位, 连协议都带上了。
• 遇到用 file:// 协议打开本地 HTML 文件的情况, location.origin 可能返回字符串 "null", 这时候做判断得单独处理。

js 获取当前域名和端口:完整地址的拼接技巧

接口联调时经常会遇到这么个需求: 前端要拿到当前页面完整的接口前缀, 包括协议、域名、端口，直接写死 https://api.example.com 在测试环境里来回改, 麻烦不说, 还容易漏改，动态获取才是正解。

origin 属性为什么最省事

从兼容性看, 主流浏览器对 location.origin 的支持已经很成熟, 前端项目里可以放心用，它在浏览器环境里的返回结果, 恰好就是 protocol + "//" + host 的完整拼装，想要接口前缀, 直接这样写:

const baseURL = window.location.origin + '/api'

假如部署环境是 http://192.168.1.10:3000, 那 baseURL 就自动变成 http://192.168.1.10:3000/api, 完全不用关心测试、预发、生产环境的差异。

手动拼接要注意什么

有些老项目需要兼容更早的浏览器, 或者不想依赖 origin, 那就自己拼:

const protocol = window.location.protocol // 可能带冒号
const host = window.location.host // 这里已经包含端口
const origin = protocol + '//' + host

有个容易被忽略的细节: protocol 返回的值末尾带着冒号, https:, 拼接时别再多写一个冒号。 如果用了 hostname 来拼, 记得把默认端口的情况单独处理, 否则 https://example.com 会被拼成 https://example.com:443。

vue 项目中 js 获取当前域名的封装实践

在 Vue 项目里, 获取域名的需求通常不会只在某一个组件出现，登录回调、动态路由、接口请求都可能用到, 封装成公共方法能省不少重复代码。

封装一个 getDomain 工具函数

在 src/utils/domain.js

里写一个简洁的封装:

export function getDomain(options = {}) {
  const { withPath = false, withProtocol = false } = options
  let url = window.location.hostname
  if (withProtocol) {
    url = window.location.protocol + '//' + url
  }
  if (withPath) {
    url += window.location.pathname
  }
  return url
}

用的时候就很灵活:

import { getDomain } from '@/utils/domain'
// 只要域名
const domain = getDomain()
// 带协议
const fullDomain = getDomain({ withProtocol: true })
// 带当前路径
const actionUrl = getDomain({ withProtocol: true, withPath: true })

对接接口时的 baseURL 动态处理

实际开发中, 前端请求的接口服务经常和静态资源不在同一个源，要判断当前环境走哪个 baseURL, 可以结合域名特征区分:

const host = window.location.hostname
const apiMap = {
  'localhost': '/api', // 本地开发代理自带转发
  'dev.example.com': 'https://dev-api.example.com',
  'test.example.com': 'https://test-api.example.com',
  'example.com': 'https://api.example.com'
}
const baseURL = apiMap[host] || window.location.origin + '/api'

这样写的好处是, 代码里没有一堆环境判断分支, 域名和环境的映射关系一目了然，如果要处理子域名, 还可以按后缀做正则匹配, .example.com 结尾都走同一套配置。

跳过那些容易踩的坑:跨域与本地开发

域名获取本身不难, 难的是在很多场景下, 你以为拿到的是域名, 实际上拿到的是别的玩意儿。

localhost 和 IP 场景的差异

本地开发时, hostname 经常是 localhost 或者 0.0.1, 这两个值在字符串比较时不相等，写判断逻辑时, 最好两个都考虑:

const isLocal = ['localhost', '127.0.0.1'].includes(window.location.hostname)

还有用局域网 IP 访问的情况, 168.x.x, 在判断环境时也别忽略，有次我排查了半天, 才发现团队里有人用手机连着同一个 Wi-Fi 调试, hostname 完全不是预期值。

反向代理场景下的域名判断

部署时前端资源常常通过 Nginx 做反向代理, 地址栏里的域名和实际服务的内网地址可能不是一回事，但 JS 拿到的永远是浏览器地址栏的域名, 也就是用户看到的那个, 所以域名校验逻辑应该针对前端页面地址来写, 不要动后端接口的地址。

防盗链与白名单校验

有些统计脚本需要校验当前页面域名是否在白名单内, 防止被别的站点直接引用，这种场景用 document.referrer 反而拿不到跨域来源, 用 window.location.hostname 最可靠:

const allowedDomains = ['www.example.com', 'm.example.com']
const currentDomain = window.location.hostname
if (!allowedDomains.includes(currentDomain)) {
  // 不在白名单, 停止执行统计逻辑
  return
}

这种做法比判断 document.referrer 靠谱得多, 因为 referrer 在刷新或直接访问时可能是空的。

js 获取当前域名相关 Q&A

js 获取当前域名兼容性如何?

主流浏览器对 hostname、host、origin 的支持都很稳定，唯一要留意的是 location.origin 在 IE 11 及更早版本中没有完整实现, 需要兼容 IE 的话就手动拼接, 或者引入 polyfill。

js 获取当前域名会不会带上端口?

分情况,用 window.location.host 会带上端口, 用 window.location.hostname 不会。http://example.com:8080 这种地址, host 返回 example.com:8080, hostname 返回 example.com，想去掉端口时, 可以把 host 拆开:

const domainWithoutPort = window.location.host.split(':')[0]

js 获取当前域名后怎么提取主域名?

要提取注册域名, 用已知后缀列表匹配最直接:

const host = window.location.hostname
const parts = host.split('.')
const mainDomain = parts.slice(-2).join('.') // 拿最后两段

这个方法能应对 example.com 这种结构, 但对 example.com.cn 会出错, 因为 com.cn 两个段都是后缀，更严谨的做法是维护一份公共后缀列表, 或者直接引入 psl 这类库。

回到最初的问题, js 获取当前域名没那么玄乎, 记住三个值就够了: 纯域名用 hostname, 带端口用 host, 带协议用 origin，实际项目里根据场景灵活切换, 再配合环境映射做封装, 基本能覆盖绝大多数前端需求。