url最后的“/”是什么作用

框架

浏览数:298

2019-8-15

多了个尾巴

有时候,当你尝试在地址栏输入https://123/demo的时候,会发现浏览器会重定向到https://123/demo/这个地址,也就是多了个/,发生了重定向。有图为证:

上面这个图是在地址栏输入imgss.github.io/demo的截图,根据这张图,可以分析,从开始请求到页面显示的过程是这样的:

  1. 当在浏览器中输入上面的地址时,服务器首先返回一个状态码为301的响应,同时响应头里有一个location,值是Location:http://imgss.github.io/demo/告诉浏览器去请求这个地址,如下图:

  2. 于是浏览器不甘心,再次向浏览器发起请求http://imgss.github.io/demo/,注意这次是http,服务器却返回状态码307,告诉浏览器去还要再跑一趟:请求Location:https://imgss.github.io/demo/`这个地址才能拿到资源

  3. 浏览器第三次请求https这个地址,才得到数据并加载显示页面。

‘/’的作用

这里不谈http=>https这一步的定向,就说说有尾巴和没尾巴的区别。

他们的区别就在于两者所表示的当前页面的路径不同。前者的当前路径是根路径,后者是demo子路径。

举个例子:假如当前页面的html中有一个超链接,地址用相对路径href=”./statictodo/index.html”表示,

如果页面的当前地址是https://imgss.github.io/demo
那么./所代表的是根路径,
当点击超链接时,浏览器会请求https://imgss.github.io/statictodo/index.html而忽略掉demo,这就可能导致服务器返回404;

如果页面的当前地址是https://imgss.github.io/demo/
那么./所代表的就是地址本身,
点击超链接时浏览器就会请求https://imgss.github.io/demo/statictodo/index.html这个路径。

对于静态资源服务器来说,请求https://imgss.github.io/demo/这样的路径能访问到页面,是因为服务器会自动在demo路径下尝试找index.html之类的文件并发给浏览器,所以html的当前路径一定是demo下的,也是因为这样,浏览器才会通过重定向自动加上/,防止相对路径解析出错,保证浏览器能正确的请求到资源。

作者:nobody-junior