JS如何获取域名，怎么获取当前页面网址？

在JavaScript开发中，获取当前页面的域名是一项基础且关键的操作，广泛应用于跨域处理、数据统计、环境配置切换等场景。实现这一功能最核心、最标准的方法是直接使用浏览器提供的全局对象 window.location，window.location.hostname 属性专门用于获取当前页面的纯域名信息。 这一方法无需引入任何第三方库，兼容性极佳,是前端开发中的首选方案。

深入解析 window.location 对象

window.location 对象包含了当前URL的所有信息，它是获取域名及相关URL数据的入口，针对不同的业务需求，我们需要区分几个容易混淆的属性,以确保获取的数据精准无误。

获取纯域名：window.location.hostname
这是最常用的属性，它返回不包含协议、端口号和路径的纯域名，如果当前URL是 https://www.example.com:8080/path/to/page，调用 window.location.hostname 将返回 www.example.com,这是进行域名比对或判断时的核心数据。

获取包含端口的域名：window.location.host
与 hostname 不同，host 属性会返回域名以及冒号后的端口号（如果端口非标准），对于上述同样的URL，window.location.host 将返回 www.example.com:8080。在开发本地环境或使用非标准端口（如8080、3000）的服务时，必须使用此属性才能正确构建请求地址。

获取完整的协议与域名：window.location.origin
origin 属性返回协议、域名和端口。https://www.example.com:8080，这在需要拼接相对路径或进行API请求时非常有用，因为它保证了基础URL的完整性,避免了硬编码协议带来的潜在错误。

使用现代 URL API 处理动态字符串

除了获取当前页面的域名，前端开发中常需要解析一个动态的URL字符串并提取其域名，ES6标准引入的 URL 接口为此提供了更优雅、更强大的解决方案。

通过 const urlObj = new URL(urlString) 可以将字符串解析为URL对象，随后，通过访问 urlObj.hostname 即可获取域名。这种方法比正则表达式更具可读性和健壮性，能够自动处理各种复杂的URL格式，包括含有特殊字符的路径或查询参数。

const dynamicUrl = "https://blog.dev-site.com/article?id=123";
const urlObj = new URL(dynamicUrl);
console.log(urlObj.hostname); // 输出: blog.dev-site.com

进阶技巧：提取主域名（Root Domain）

在实际的企业级应用中，我们往往需要获取主域名（例如将 sub.example.com 处理为 example.com），以便在子域名之间共享Cookie或进行跨域验证。这需要通过字符串操作或正则表达式来实现。

一种常见的专业解决方案是将域名按点分割，然后取最后两部分，如果域名后缀是已知的双字节后缀（如 .com.cn, .org.uk）,则需要取最后三部分。

代码实现示例：

function getRootDomain(hostname) {
    // 简单处理：取最后两部分
    const parts = hostname.split('.');
    if (parts.length > 2) {
        return parts.slice(-2).join('.');
    }
    return hostname;
}
// 注意：生产环境建议结合公共后缀列表（Public Suffix List）库来精确判断

这种处理方式在多租户SaaS应用或大型分布式系统中尤为重要，能够有效隔离不同租户的数据或实现全局的用户状态同步。

服务端环境（Node.js）中的获取方案

JavaScript不仅运行在浏览器，也运行在服务端，在Node.js环境中，不存在 window 对象,因此获取域名的逻辑完全不同。

在Node.js的 HTTP 服务中，域名通常包含在请求头（Headers）的 host 字段中。

使用 Express 框架时：

app.get('/', (req, res) => {
    const host = req.headers.host; //  example.com:3000
    // 如果需要去掉端口，可以进一步处理
    const hostname = host.split(':')[0];
    res.send(`Server Domain: ${hostname}`);
});

理解浏览器端与服务端获取域名机制的差异，是全栈开发者必备的专业知识，有助于在SSR（服务端渲染）或同构应用中正确处理上下文。

安全性与最佳实践

在处理域名信息时,安全性是不可忽视的一环。

防止DNS重绑定攻击
在使用获取到的域名进行敏感操作（如作为API请求的目标）时，务必验证该域名是否在白名单内，攻击者可能通过DNS重绑定将内网IP映射到公网域名,从而利用你的应用扫描内网资源。

避免直接信任 document.domain
虽然 document.domain 可以设置，但为了安全起见，现代浏览器对其限制严格。建议优先使用 window.location.hostname，仅在必须实现旧式跨域子域通信时才谨慎修改 document.domain。

处理空值或异常
在解析动态URL字符串时，始终使用 try...catch 块包裹 new URL() 操作，防止传入无效字符串导致脚本崩溃,保证页面的高可用性。

相关问答

Q1：在JavaScript中，window.location.host 和 window.location.hostname 有什么本质区别？
A： 它们的本质区别在于是否包含端口号。window.location.hostname 仅返回域名（如 www.example.com），而 window.location.host 返回域名加上端口号（如 www.example.com:8080），如果你的应用运行在标准的HTTP（80）或HTTPS（443）端口下，两者返回值相同；但在本地开发环境（如 localhost:3000）或使用了非标准端口的服务器上，必须使用 host 属性才能获取完整的访问地址。

Q2：如何在一个静态的HTML页面中，通过JavaScript判断当前访问的是否为HTTPS协议，并自动跳转到HTTPS？如果获取域名包含端口号怎么办？
A： 可以通过检查 window.location.protocol 来判断协议，如果协议是 http:，则使用 window.location.href 或 window.location.replace 进行跳转，为了保留域名和端口号，建议直接使用 window.location.host,代码示例如下：

if (window.location.protocol === 'http:') {
    const httpsUrl = 'https://' + window.location.host + window.location.pathname + window.location.search;
    window.location.replace(httpsUrl);
}

这段代码会自动将当前的HTTP请求（包括端口号和路径）重定向到对应的HTTPS地址,确保数据传输安全。

如果您在具体的项目实践中遇到了更复杂的域名解析场景，或者有关于跨域资源共享（CORS）的疑问，欢迎在评论区留言,我们可以进一步探讨解决方案。