多了个尾巴
有时候,当你尝试在地址栏输入https://123/demo
的时候,会发现浏览器会重定向到https://123/demo/
这个地址,也就是多了个/
,发生了重定向。有图为证:
上面这个图是在地址栏输入imgss.github.io/demo
的截图,根据这张图,可以分析,从开始请求到页面显示的过程是这样的:
-
当在浏览器中输入上面的地址时,服务器首先返回一个状态码为301的响应,同时响应头里有一个location,值是
Location:http://imgss.github.io/demo/
告诉浏览器去请求这个地址,如下图: -
于是浏览器不甘心,再次向浏览器发起请求
http://imgss.github.io/demo/,注意这次是
http,服务器却返回状态码307,告诉浏览器去还要再跑一趟:请求
Location:https://imgss.github.io/demo/`这个地址才能拿到资源: -
浏览器第三次请求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下的,也是因为这样,浏览器才会通过重定向自动加上/
,防止相对路径解析出错,保证浏览器能正确的请求到资源。