js 当前域名

在现代的前端开发中，获取当前域名是一个常见的需求。无论是为了实现跨域请求、构建动态链接，还是为了进行一些安全检查，掌握如何使用JavaScript获取当前域名都是非常有用的。本文将详细介绍如何在JavaScript中获取当前域名，并探讨一些相关的应用和注意事项。

为什么需要获取当前域名

在开发过程中，获取当前域名有多种用途：

跨域请求：在进行跨域请求时，了解当前域名可以帮助你构建正确的请求URL。
动态链接：在生成动态链接时，使用当前域名可以确保链接的正确性和有效性。
安全检查：在某些安全场景下，检查当前域名可以防止恶意请求和攻击。
环境判断：在多环境部署中，通过当前域名可以判断当前环境，从而执行不同的逻辑。

如何获取当前域名

在JavaScript中，获取当前域名非常简单，可以使用window.location对象。window.location对象包含了许多关于当前页面URL的信息，其中hostname属性可以用来获取当前域名。

基本用法

const currentDomain = window.location.hostname;
console.log(currentDomain);

这段代码会输出当前页面的域名。例如，如果你在 https://www.example.com 上运行这段代码，输出将是 www.example.com。

获取完整的URL

除了获取域名，有时你可能还需要获取完整的URL。window.location 对象提供了多种属性，可以帮助你获取URL的不同部分：

href：完整的URL。
protocol：URL的协议部分，如 http: 或 https:。
host：包含域名和端口号的主机部分。
pathname：URL的路径部分。
search：URL的查询字符串部分。
hash：URL的片段标识符部分。

const fullUrl = window.location.href;
const protocol = window.location.protocol;
const host = window.location.host;
const pathname = window.location.pathname;
const search = window.location.search;
const hash = window.location.hash;

console.log(fullUrl); // 完整的URL
console.log(protocol); // 协议部分
console.log(host); // 域名和端口号
console.log(pathname); // 路径部分
console.log(search); // 查询字符串部分
console.log(hash); // 片段标识符部分

获取顶级域名

有时你可能需要获取顶级域名（例如，example.com 而不是 www.example.com）。这可以通过解析hostname来实现。

function getTopLevelDomain(hostname) {
  const parts = hostname.split('.');
  if (parts.length > 2) {
    return parts.slice(-2).join('.');
  }
  return hostname;
}

const currentDomain = window.location.hostname;
const topLevelDomain = getTopLevelDomain(currentDomain);
console.log(topLevelDomain);

这段代码会输出顶级域名，例如 example.com。

应用场景

跨域请求

在进行跨域请求时，了解当前域名可以帮助你构建正确的请求URL。假设你有一个API服务器，域名是 api.example.com，你可以使用当前域名来构建请求URL。

const currentDomain = window.location.hostname;
const apiUrl = `https://api.${currentDomain}/data`;
fetch(apiUrl)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

动态链接

在生成动态链接时，使用当前域名可以确保链接的正确性和有效性。例如，你可能需要生成一个分享链接，让用户分享当前页面。

const currentDomain = window.location.hostname;
const currentPath = window.location.pathname;
const shareUrl = `https://${currentDomain}${currentPath}`;
console.log(shareUrl);

安全检查

在某些安全场景下，检查当前域名可以防止恶意请求和攻击。例如，你可以在前端进行域名检查，确保用户访问的是正确的网站。

const currentDomain = window.location.hostname;
const allowedDomains = ['www.example.com', 'example.com'];

if (!allowedDomains.includes(currentDomain)) {
  console.error('访问的域名不正确');
  // 你可以在这里重定向用户到正确的域名
}

环境判断

在多环境部署中，通过当前域名可以判断当前环境，从而执行不同的逻辑。例如，你可以在开发环境和生产环境中执行不同的代码。

const currentDomain = window.location.hostname;
const isDevelopment = currentDomain.includes('dev.');

if (isDevelopment) {
  console.log('当前环境是开发环境');
  // 开发环境特有的代码
} else {
  console.log('当前环境是生产环境');
  // 生产环境特有的代码
}

注意事项

安全性：在使用当前域名进行安全检查时，确保你的检查逻辑是可靠的，避免被绕过。
兼容性：虽然window.location对象在现代浏览器中是标准的，但在一些老旧的浏览器中可能存在兼容性问题。确保你的代码在目标浏览器中能够正常运行。
性能：获取当前域名的操作非常轻量级，不会对性能造成显著影响，但在频繁使用时仍需注意。