JS获取当前域名总出错？三招教你精准捕获

各位码农兄弟，是不是经常遇到这种情况——用JS获取域名时，一会儿带www一会儿不带，端口号还时不时来捣乱？别慌，今儿咱们就掰开揉碎了说说这个看似简单实则暗藏杀机的技术活！（推眼镜准备开讲）

第一坑：location.hostname和document.domain啥区别？

去年团队新来的实习生就栽在这，把两个属性混用导致跨域问题。咱们直接上对比：

​​血泪案例​​：某电商网站用document.domain做统计，结果子域名间的数据全混在一起，老板差点开了整个技术部！

第二坑：如何优雅处理www前缀？

这个需求就像吃饭要不要加辣椒——各有所爱。推荐两种主流方案：

​​方案一：正则一刀切​​

js**
const cleanDomain = window.location.hostname.replace(/^www\./, '');

​​方案二：环境判断法​​

js**
const isProduction = process.env.NODE_ENV === 'production';const mainDomain = isProduction ? 'example.com' : 'dev.example.com';

​​特别提醒​​：如果用Vue/React框架，千万别在生命周期钩子外直接操作window对象，否则SSR渲染会炸！

第三坑：跨域请求时的域名玄学

最近帮朋友调试个报错"Blocked by CORS policy"，发现是域名获取姿势不对。正确流程应该是：

1. 主站用window.location.origin获取完整源
2. 动态拼接API地址：

js**
const API_ENDPOINT = `${window.location.origin}/api/v1`;

1. 本地开发配置代理：

js**
// vite.config.jsexport default defineConfig({  server: {    proxy: {      '/api': 'http://localhost:3000'    }  }})

​​对比方案​​：

避坑指南（救命锦囊）

1. ​​HTTPS强制转换​​：

js**
const currentProtocol = window.location.protocol;if(currentProtocol === 'http:') {.location.replace(`https://${window.location.host}${window.location.pathname}`);}

1. ​​端口号处理​​：

js**
const port = window.location.port || (window.location.protocol === 'https:' ? 443 : 80);

1. ​​域名有效性校验​​：

js**
function isValidDomain(domain) {  return /^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/.test(domain);}

老司机观点

在前后端分离架构里混了八年，发现三个铁律：​​永远不要相信客户端传来的域名​​、​​始终做二次验证​​、​​本地开发环境必须Mock域名​​。最近TypeScript 5.0出了新特性，用URLPattern接口处理域名更安全，建议大家赶紧学起来。

有个业内秘闻：某大厂曾因document.domain的缓存问题导致CDN劫持，损失千万级流量。现在他们的解决方案是用new URL()解析当前地址，这个方法比直接操作location对象可靠三倍。记住，域名处理就像走钢丝，多系条安全绳总没错！