如何用js得到当前域名信息？，js得到域名的方法

直接用一条代码拿到域名

用 window.location.hostname 获取当前页面的域名，这是前端开发中最直接、最常用的写法，兼容性极佳，在现代浏览器中没有任何问题。

const domain = window.location.hostname;
console.log(domain); // 输出类似 www.example.com

这段代码执行后返回的字符串,不包含协议头（http://）和端口号（8080），只保留域名部分，它已经是多数场景下的标准答案了。

js 获取当前域名的方法各种写法的取舍

上面给出的 window.location.hostname 是最主流的方案，但实际开发中，不同场景往往需要不同的写法，下面把几种常见方法拆开来讲。

用 window.location.host 获取带端口号的完整域名

window.location.host 返回的是域名加端口号的组合，这在本地开发调试时尤其常见。

const host = window.location.host;

比如你打开 http://localhost:3000，拿到的是 localhost:3000，如果你用 Vue 或 React 开发前端项目，localStorage 里存 token 时经常要用到这个值做CORS相关判断。

场景：后端接口调试时需要区分 localhost 和正式域名

很多前端新手在开发时,会直接把后端返回的接口路径写死，结果代码上线后接口全部失效，一个聪明的做法是，拿到当前域名后动态拼接接口地址：

const isDev = window.location.hostname === 'localhost';
const baseURL = isDev ? 'http://localhost:8080' : 'https://api.example.com';

用 window.location.href 手动解析

window.location.href 返回完整的 URL，包括协议、域名、路径、参数等，你需要用拆分的方式抠出域名：

const url = window.location.href;
const domain = url.split('/')[2];

这招在某后端传参场景中很管用,比如后端给前端发了一个跳转链接，前端需要判断该链接是不是本站域名的时候，用 split('/')[2] 能快速解决。

用正则提取域名（兼容各种杂乱的 URL 结构）

如果你的域名来自一个完整的 URL 字符串，而不是当前页面，正则表达式是更可靠的选择：

function extractDomain(url) {
  const match = url.match(/^(?:https?://)?(?:[^@n]+@)?([^:/n]+)/i);
  return match ? match[1] : null;
}

这个函数可以正确处理 https://user:pass@www.example.com:8080/path 这种带有认证信息的复杂 URL，不会被冒号误导，行业共识认为，正则提取在健壮性上远超字符串拆分。

表格对比：三种获取域名方式的适用场景

js 获取 localhost 域名的特殊细节

本地开发是另一套玩法。window.location.hostname 在 localhost 下返回的是 localhost，而在通过 IP 访问的情况下（168.1.100:3000），返回的是 IP 地址。

const currentDomain = window.location.hostname;
if (currentDomain === 'localhost' || currentDomain === '127.0.0.1') {
  console.log('本机环境');
}

有个细节容易被忽略：localhost 和 0.0.1 从技术层面上讲是两个不同的 hostname，但指向同一个主机，当你用 0.0.0 启动某些 Node.js 开发服务器时，访问地址又变成了 168.x.x，这种情况在移动端真机调试时经常遇到。

在实际工作中,处理本地环境判断时建议把三种情况全部覆盖：localhost、0.0.1、本机局域网IP。

多级子域名场景：js 获取域名的主域名部分

window.location.hostname 返回完整的主机名，blog.example.com，但有时候你只需要主域名 example.com，用来做跨子域名的 cookie 共享。

用 split 系列手法切割主域名

function getMainDomain(hostname) {
  const parts = hostname.split('.');
  if (parts.length > 2) {
    // 处理 www.example.com 这种格式，取后两段
    return parts.slice(-2).join('.');
  }
  return hostname;
}

这个方法在 www.example.com 下返回 example.com，在 blog.example.com 下也返回 example.com。

多个子域名之间的数据互通（和 js 判断域名场景联动）

在同一主域名下的两个子域名 app.example.com 和 admin.example.com 之间共享登录状态时，可以设置 cookie 的 domain 为主域名：

document.cookie = "token=abc123; domain=.example.com; path=/";

这样就实现了跨子域名的登录态同步,值得注意的是（这里用一次），domain 必须带前导点 .example.com，否则浏览器会拒绝设置。

子域名下 JS 重定向到主域名的写法

const hostname = window.location.hostname;
if (hostname.startsWith('www.')) {
  window.location.href = `${window.location.protocol}//${hostname.replace('www.', '')}${window.location.pathname}`;
}

这适用于你希望用户访问不带 www 的域名的情况，节省服务器处理 www 重定向的开销。

页面跳转和取域名相关的实用组合技

用 js 判断是不是某个域名的快捷判定

function isDomain(domain) {
  return window.location.hostname === domain || window.location.hostname.endsWith('.' + domain);
}

第一层判断直接相等,第二层判断覆盖了子域名的情况。

反向获取端口（配合 js 得到域名做完整 URL 拼接）

const protocol = window.location.protocol;   // "http:" 或 "https:"
const hostname = window.location.hostname;   // "www.example.com"
const port = window.location.port;           // "8080" 或空字符串
const fullURL = `${protocol}//${hostname}${port ? ':' + port : ''}`;

这套写法有点老道的地方在于：location.port 在非标准端口场景下返回字符串，如果没有指定端口则返回空字符串，这样拼接时就不会出现 undefined。

动态设置接口请求的 baseURL

前端项目打包后部署到不同的域名上,接口地址不能写死，业内专家指出，最常见的做法是让后端提供配置文件，前端加载后动态计算域名：

fetch('/config.json').then(res => res.json()).then(config => {
  window.API_BASE = config.apiBase;
});

作为替代方案,前端也可以直接用 window.location.origin：

const apiBase = window.location.origin + '/api';

这适用于后端接口和前端部署在同一域名下的情况,是目前最省心的方案。

域名获取的安全问题和边界情况

直接暴露在浏览器端的 JS 不存在真正意义上的”安全”，但严格校验域名可以在接口被非法调用时增加一道防线。

防止恶意请求前先校验白名单

const allowedDomains = ['www.example.com', 'admin.example.com', 'm.example.com'];
const currentDomain = window.location.hostname;
if (!allowedDomains.includes(currentDomain)) {
  window.location.href = 'https://www.example.com/error';
}

注意 getElementById 取到不同域名的情况

如果页面里嵌入了 iframe，在 iframe 内部取 window.location.hostname 拿到的是 iframe 自己的域名，不是父页面的，需要跨域时用 window.parent.location.hostname，但前提是父子页面同域，否则被浏览器拦截。

JS 域名不会做 DNS 解析

JavaScript 拿到的域名永远只是字符串，它不会帮你做 DNS 解析，这就要求你写代码时，拿到的域名必须和后端对得上，后端返回的数据里带着 api.example.com，前端注册了 serviceWorker 时，Service Worker 的

scope 是受限于 CORS 的，不能随意跨域注册。

当域名和路径一起出现时的处理

有时候你的需求不止是域名,还有路径。https://example.com/user/profile ，你要把 /user/profile 也拿到。

const pathname = window.location.pathname;

这返回的是斜杠开头的完整路径,不少单页应用场景下，前端路由在 HTML5 history 模式下，需要自己拼出完整 URL：

const fullPath = window.location.pathname + window.location.search;

这种方法在处理页面统计、分享卡片等场景中非常实用。

从完整 URL 字符串中提取域名的特殊边界情况处理

如果字符串是 developer.mozilla.org 或者本机域名 http://localhost:8080/docs，用正则的时候要小心两点：

• 协议头可能有也可能没有
• 域名最后可能带着冒号端口,正则捕获组要正确处理

function cleanDomain(url) {
  return url.replace(/^https?:///, '').replace(/^www./, '').split(/[/:?#]/)[0];
}

这个写法把协议、www.、路径、端口和参数全部去掉，拿到的就是纯净的域名。

window.location.hostname 始终是 js 获取域名的最优解，适用于绝大多数业务场景，在需要判断开发环境、共享 cookie、处理子域名时选择 location.host 或正则辅助判断，localStorage 存域名配合后端接口做白名单校验，是实际开发中最常用的组合套路。

获取域名本身只是一个小 API，但和完整的 URL 拼接、跳转、接口请求联动起来，就变成了前端日常工程化中不可或缺的一环。

js 获取域名 常见问题 Q&A

如何用 js 获取当前页面域名且不带 www？

const domain = window.location.hostname.replace(/^www./, '');

这个代码在 www.example.com 下返回 example.com，在 example.com 下返回 example.com。

js 获取域名和获取 URL 有什么本质区别？

window.location.href 返回整个 URL，包括 http://、路径、参数、锚点；window.location.hostname 只返回主机部分，如果你需要区分协议或端口，用 window.location.host 更精确。

在同一份代码里判断 localStorage 可用且域名正确怎么办？

localStorage 本身是按源（协议+域名+端口）隔离的，不同域名间不能互相读取，所以判断域名正确性的操作应该在写 localStorage 之前完成：

if (window.location.hostname === 'www.example.com') {
  localStorage.setItem('token', 'value');
} else {
  console.warn('当前域名不受信任');
}

这样可以在正式环境里屏蔽掉测试域名的数据污染。