js获取域名地址哪个方法好？推荐最佳方式及实例

发布日期： 2025-12-11 阅读量： 作者： admin

那天给公司项目加个功能，需要获取当前域名来拼接接口地址，结果被坑惨了。刚接手的前端代码乱成一锅粥，光是找域名的地方就有三处，用的方法还不一样。有的是，有的是，还有个用的，给我整晕了。

乱试一通栽坑里

我想着统一一下，就偷懒直接用，觉得名字短好记。本地开发环境都是跑 localhost:3000，完全没问题，美滋滋。结果一上线，测试在群里喊炸锅了：为啥有的页面地址端口号也出来了？有的明明用了 https 却返回 http？我一看，坏菜了！

赶紧复盘：

用 host，它会老老实实把域名和端口号都吐出来。比如线上地址是 *:443 这种，端口443也跟着露脸，完全不需要！
用 hostname 倒是清爽，只吐域名。结果在服务器渲染（SSR）环境里头，这老家伙居然偶尔罢工，undefined 给我看！气得摔键盘！

测试那边更搞笑，测出个神级Bug：有个页面用判断协议，结果本地开发是 http，接口配的 https，跨域了！前端自己造出跨域问题你敢信？

翻官方文档找救兵

被坑怕了，老老实实翻 MDN。发现有个不起眼的家伙：URL API。以前都觉得这种花里胡哨的新API太装，这回抱着死马当活马医试试。随手写：

let currentURL = new URL(*);
let cleanDomain = *; // 稳稳的域名
let safeProtocol = *; // 清清楚楚带冒号的'https:'

真香！这玩意儿简直治好了我的强迫症：

绝对路径稳如老狗：不管你是完整网址还是奇奇怪怪的相对路径，new URL() 都能给你拆得明明白白。
协议问题绝迹了：它返回的协议自动带冒号，再也不用自己拼接 'https' + ':' + '//' 这种反人类的字符串。
SSR不报错了：服务器环境用也行，用之类的动态传进来造一个URL对象，直接解决环境分裂问题。

顺手根治历史遗留病

找到救星后，我花了俩小时把项目里所有获取域名的地方全改了：

// 旧代码入土为安
function getDomainOld() {
return *; // 或者 hostname/protocol 各种妖魔鬼怪

// 新代码统一格式
function getDomain() {
try {
return new URL(*).hostname; // 管你用啥环境，我只要域名！
} catch (e) {
*('解析域名翻车了:', e); // 线上环境居然也有空URL？兜个底！
return '*'; // 保命用的默认值


顺手写了个协议获取工具，防止跨域再作妖：
function getProtocol() {
const { protocol } = new URL(*); // 解构赋值省事
return protocol; // 直接是 'https:' 或者 'http:' 完事儿

血泪总结
折腾一天结论就一句话：别再摸黑用 location 那些属性了！

要域名？直接 new URL(*).hostname，干净无污染。
要协议？new URL(*).protocol，带冒号的成品拿好不谢。
还嫌麻烦？把这俩操作写成工具函数，全项目复用，世界清净！

现在代码里清一色的URL对象，再也没人为端口号、协议、跨域扯皮了。要是早两年知道这招，省下的加班时间够我追完三部美剧。兄弟们记住了，工具顺手了，搬砖都有劲儿！


         
      上一篇
      seo与sem的不同有哪些？3分钟带你搞懂两者区别！
    
        
      下一篇
      暂无


  
    随便看看
    
             Onlinemall是什么？揭秘这个网上商城背后的真相  发布日期： 2025-11-05  
             金网科技：诚信可靠的IT合作伙伴，助您业务快速发展  发布日期： 2025-11-04  
             淘宝付费推广效果差？教你避免这些常见误区  发布日期： 2025-11-03  
             如何让百度快速收录你的网站网页？  发布日期： 2025-10-24  
             深圳智通人才网：智通直聘，高效便捷找工作，职位多多！  发布日期： 2025-10-31