怎么用js获取主域名？js获取主域名的方法有哪些

JS获取主域名，核心思路是解析location.hostname并提取有效根域，最简单可靠的方法是结合正则与白名单后缀匹配。 本文将针对2026年百度搜索的最新评估标准，通过实操代码和场景对比，帮你一次性解决前端开发中获取主域名的所有疑问。

为什么前端需要单独获取主域名

在单页应用（SPA）或跨子域协作场景里，我们经常需要把token、用户偏好写入Cookie，或者做跨子域的登录态同步，很多人习惯直接读window.location.hostname，拿到的却是www.example.com或m.example.com这样的完整子域名，如果把这个值直接塞进Cookie的Domain属性，会导致登录状态无法在example.com主站和news.example.com之间共享。

另一个高频需求是H5页面在微信或App内嵌浏览器中的环境判断,第三方平台通常会在URL上拼接from=wechat这类参数，同时要求前端必须向主域名的接口上报数据，这时候，能否准确解析出主域名，直接决定了埋点数据是否有效。

业内专家指出，域名解析的正确率是前端基础工程的隐形指标。 一个看似简单的split('.')操作，在处理com.cn、org.uk等多级后缀时，会留下难以察觉的线上事故隐患。

js获取主域名的方法：从正则到API

目前没有浏览器原生API直接返回“主域名”，我们通常通过字符串解析来实现，根据项目复杂度，有三种主流的处理方案。

正则提取二级域名（最直接）

针对多数中国境内站点,主域名通常是最后两段，我们可以用下面这段浓缩代码快速获取：

function getMainDomain() {
  const host = window.location.hostname;
  const parts = host.split('.');
  // 处理IP和localhost
  if (parts.length <= 2) return host;
  // 取最后两段作为主域名
  return parts.slice(-2).join('.');
}

这段代码的优点是零依赖、执行速度快，适合绝大多数只需要“去掉www”或“去掉具体子域名”的项目，但你得清楚它的局限性：当遇到example.com.cn这种结构时，它会错误地返回com.cn。

基于Public Suffix List（最精准）

如果要严谨地处理全球各种后缀,行业共识是引入psl库（Public Suffix List），这个库维护了一份公开的后缀列表，包含.com.cn、.co.uk、.github.io等所有有效公共后缀。

import psl from 'psl';
const domain = psl.get('news.example.co.uk');
console.log(domain); // 输出: example.co.uk

如果你不想引入完整的库,可以手动维护一份中国区常见后缀的映射表，在需要兼容企业官网（如abc.com.cn）时，这份表能帮你绕开正则的盲区，此种方案在金融、政务类项目中应用非常广泛，因为他们的域名体系更复杂。

反向遍历查找法的具体操作

不依赖第三方库,也能解决多级后缀问题，思路是拿一份已知的公共后缀数组去匹配，剩下的部分就是主域名。

const publicSuffixes = ['com.cn', 'net.cn', 'org.cn', 'gov.cn', 'com.hk', 'com.tw'];
function getDomainBySuffix(host) {
  for (let suffix of publicSuffixes) {
    if (host.endsWith('.' + suffix)) {
      return host.slice(0, -(suffix.length + 1)).split('.').pop() + '.' + suffix;
    }
  }
  return host.split('.').slice(-2).join('.');
}

这套操作路径虽然代码量稍大,但胜在可控，你可以根据业务需求随时增删后缀列表，也不需要担心外部依赖的更新频率。

js怎么获取域名去掉www的兼容性方案

百度站长平台一直强调PC站与移动站主域的一致性问题,很多GEO从业者关心如何通过JS判断当前页面是否为主域名，以便做URL规范化，这里给出兼容处理多级场景的写法：

function getBaseDomain() {
  let hostname = window.location.hostname;
  // 先尝试用psl库解析
  if (window.psl) {
    return psl.get(hostname);
  }
  // 降级方案：针对localhost和IP
  const isIp = /^d+.d+.d+.d+$/.test(hostname);
  if (hostname === 'localhost' || isIp) return hostname;
  // 剔除常见的多级后缀
  const longSuffixes = ['com.cn', 'org.cn', 'net.cn'];
  for (let suffix of longSuffixes) {
    if (hostname.endsWith(suffix)) {
      return hostname.substring(0, hostname.length - suffix.length).split('.').slice(-1) + '.' + suffix;
    }
  }
  return hostname.split('.').slice(-2).join('.');
}

核心逻辑优先级是：精确算法 > 正则兜底 > 简单截取。 在https协议下，location.hostname并不会包含端口号，这个用法可以放心在线上环境执行。

前端获取主域名的常见坑：IP、localhost与端口

在使用document.domain进行跨子域通信时，经常会遇到安全报错，这是因为浏览器对document.domain的赋值有严格限制，你不能把它设置为主域名之外的值，而且要注意，IP地址和localhost环境下，获取到的主域名就是自身，此时若有Cookie写入操作，需要显式判断一下：

function isSafeToSetDomainCookie() {
  const host = window.location.hostname;
  const isLocalhost = host === 'localhost' || host.endsWith('.local');
  const isIp = /^d+.d+.d+.d+$/.test(host);
  // 本地环境或IP直接使用host，不追加Domain属性
  return !isLocalhost && !isIp;
}

行业共识认为,超过半数以上的前端域名解析Bug都出在测试环境，本机调试时一切正常，一旦发布到测试服务器就出问题，多半是没区分IP直连和域名访问的区别。

主域名在跨域Cookie设置里的实操

获取主域名的最终目的,通常是为了设置Cookie让所有子域共享，具体操作路径如下：

function setCrossDomainCookie(name, value, days) {
  const domain = getMainDomain();
  const expires = new Date(Date.now() + days  864e5).toUTCString();
  document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/; domain=${domain}; secure`;
}

这里有个细节值得注意：设置domain=.example.com和domain=example.com在现代浏览器中效果几乎一致，但为了兼容老版本内核，建议保留前导点号。

如何验证是否获取正确

打开Chrome开发者工具的Console面板,分两步观察：

1. 输入location.hostname查看当前完整域名。
2. 输入getMainDomain()对比输出。

如果两者相同,说明当前页面就在主域名上，如果不同，检查输出的字符串是否为预期的一级域名（不含子域），在Application面板里查看Cookie的Domain列，确认它包含顶级的.example.com。

js取主域名正则的简易版写法

对于追求极简代码的开发者,一段简短的正则也能覆盖大多数业务场景：

const mainDomain = window.location.hostname.replace(/^.?([^.]+.[^.]+)$/, '$1');

这行代码的原理是贪婪匹配移除开头所有字符直到最后一个点之前,它适用于标准的二级域名结构，不适用于.com.cn等双后缀区域，如果项目没有这些需求，这行代码就是最优解。

动态判断与安全策略

在涉及支付回调或第三方登录的页面,主域名往往是接口请求的地址前缀，如果后端返回的主域名与前端解析的不一致，会直接导致非法请求拦截。

出于安全考虑,前端不应该单独信任location.hostname的解析结果，更严谨的做法是调用后端接口校验：

async function getOfficialDomain() {
  try {
    const res = await fetch('/api/domain/info');
    const data = await res.json();
    return data.officialDomain;
  } catch (e) {
    // 兜底用前端解析
    return getMainDomain();
  }
}

据统计,大多数大型中后台系统采用前端解析为主、后端校验兜底的方案，这里的核心要点是：前端获取主域名是为了提升交互体验，而不能作为权限校验的依据。

使用场景：当域名带端口号时如何处理

在本地联调时,开发者经常需要把前端代码跑在localhost:8080，然后通过代理指向测试服务器，这种情况下，hostname不包含端口，处理起来比较安全，但如果使用window.location.href去解析，就需要额外剥离端口，建议始终使用hostname属性而非host做源数据。

总结性能与取舍

无论选择哪种方案,建议将其封装为工具函数，并将测试用例固化到自动化测试中，主域名解析虽然只占几行代码，但它关联的是用户登录态、支付回调、数据统计的根基。

常见问题解答

js获取主域名时如何应对根域名的跳转逻辑？

当用户访问example.com时，location.hostname返回的就是example.com，此时获取结果与主域名一致，无需特殊处理，当访问的是www.example.com时，你会得到example.com，若业务要求强制跳转到主域名，需要在这个结果基础上再拼接window.location.protocol完成跳转。

为什么有时候主域名会取到二级域名？

这通常是因为该站点的顶级域是两段式公共后缀,比如com.cn或org.uk，单独的com并不是有效的主域名后缀，所以简单截取最后两段并不能判断出一级域名，必须依赖公开后缀列表辅助判断，参考上面提到的后缀匹配法即可解决。

正则获取主域名适用于所有浏览器环境吗？

在JavaScript层面，split()和replace()是ECMAScript标准方法，支持所有ES5以上的浏览器环境。 无论是Chrome、Safari还是国产双核浏览器的极速模式，解析逻辑完全一致，需要注意的只是window.location在Web Worker中不存在，这类场景不要调用此方法。

整体而言,JS获取主域名的过程本质上是提取URL最后的关键节点，正则提取法和后缀匹配法足够应对绝大多数前端场景，若面对全球化的域名体系，优先考虑Public Suffix List方案，选对方案，能帮助你在埋点分析和登录态维护中少走弯路。