JavaScript 中 location.host 与 location.hostname 的区别

Admin
Admin
Admin
52
文章
6
评论
2018年8月20日14:41:31 评论 4,375 863字阅读2分52秒

最近有一个项目的配置文件中需要获取当前的服务器地址,然后拼接成后端的请求地址,在其他的环境中配置成  root: location.hostname  都是没有问题,但是代码换了一个环境后,后端的接口就一直请求失败,通过浏览器的 NetWork 查看请求的后端地址不是我们实际的地址,后来发现是这个配置文件的问题,把  location.hostname  换成  location.host  就行了。

问题总结:

在JavaScript 中大多数情况下,我们不会发现 location.host 与 location.hostname 的区别,因为大多数情况下,我们的网页默认用的是 80 端口。

MDN的文档说明如下:

  1. Location.host
  2.     Is a DOMString containing the host, that is the hostname, a ':', and the port of the URL.
  3. Location.hostname
  4.     Is a DOMString containing the domain of the URL.

也就是说,host 是 URL 中的 主机:端口, 而 hostname 仅是 URL 中的 主机。

举个例来说:

网址  https://www.zhuqiming.cn 

  • location.host = www.zhuqiming.cn
  • location.hostname = www.zhuqiming.cn

网址 https://www.zhuqiming.cn:443 

  • location.host = www.zhuqiming.cn:443
  • location.hostname = www.zhuqiming.cn

所以它们的区别是在于:

location.host 包含端口,比如是 127.0.0.1:81。如果端口是 80,那么就没有端口,就是 127.0.0.1

location.hostname 不包含端口,比如是 127.0.0.1

博主只是一名前端的小白,只是把自己用到的知识分享一下,要是有什么不对的地方,欢迎大家提出~~

继续阅读
Admin
  • 本文由 发表于 2018年8月20日14:41:31
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
Vue 中计算属性和侦听器 前端开发

Vue 中计算属性和侦听器

在 Vue 中通常我们会在模板绑定表达式,模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句,那么整个模板就会变得特别的臃肿,可读性和维护性将会降低,因此为了简化逻辑,我们可以使用计算属...
浅谈 JS 中的防抖和节流操作 前端开发

浅谈 JS 中的防抖和节流操作

一般在进行窗口的 resize、scroll 等输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用 debounce(防抖)和 thr...
JS中的「import」和「require 」的区别 前端开发

JS中的「import」和「require 」的区别

import 和 require 是 JS 模块化编程使用的,模块化是一种将系统分离成独立功能部分的方法,一个模块是为完成一个功能的一段程序或子程序,"模块"是系统中功能单一且可替换的部分。模块化思想...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: