js获取域名和端口

基础概念

在JavaScript中，获取当前页面的域名和端口可以通过window.location对象来实现。window.location对象包含了当前文档的URL信息，包括协议、主机名（域名）、端口、路径等。

相关优势

1. 方便快捷：通过window.location对象获取域名和端口非常简单，不需要额外的库或复杂的代码。
2. 跨平台兼容：所有现代浏览器都支持window.location对象，因此这种方法具有良好的跨平台兼容性。

类型

• 域名：可以通过window.location.hostname获取。
• 端口：可以通过window.location.port获取。

应用场景

1. 动态配置：根据不同的域名或端口加载不同的资源或配置。
2. 安全检查：验证当前页面是否在预期的域名和端口上运行。
3. 日志记录：记录用户访问的域名和端口信息，用于分析和调试。

示例代码

// 获取域名
var hostname = window.location.hostname;
console.log("Hostname: " + hostname);

// 获取端口
var port = window.location.port;
console.log("Port: " + port);

可能遇到的问题及解决方法

问题1：为什么获取到的端口是空字符串？

原因：如果当前页面是通过HTTP协议访问的，默认端口是80，浏览器不会显示端口号。同样，如果是通过HTTPS协议访问，默认端口是443，也不会显示端口号。

解决方法：可以通过检查window.location.protocol来判断当前协议，并手动添加默认端口。

var port = window.location.port;
if (port === "") {
    if (window.location.protocol === "http:") {
        port = "80";
    } else if (window.location.protocol === "https:") {
        port = "443";
    }
}
console.log("Port: " + port);

问题2：为什么获取到的域名不正确？

原因：可能是由于页面被重定向到了另一个域名，或者使用了反向代理。

解决方法：可以通过window.location.origin获取完整的协议、域名和端口信息，这样可以避免一些重定向或代理带来的问题。

var origin = window.location.origin;
console.log("Origin: " + origin);

参考链接

• MDN Web Docs: window.location

通过以上方法，你可以轻松获取当前页面的域名和端口，并解决一些常见问题。