在浏览网页的时候,如果你留意每一个页面的url,就会发现有的末尾带斜杠,而有的没带。在web开发中我们往往也很少去留意url末尾上的那条斜杠,但有的时候没有这条斜杠就会导致一些意想不到的结果。
作为演示,我们先用node创建一个本地http服务器httpServer.js。代码如下:
const http = require('http');
const fs = require('fs');
http.createServer(function (request, response) {
fs.readFile('./index.html', function (e, d) {
response.writeHead(200);
response.end(d);
});
}).listen(8081);
这个服务器的行为很简单,读取当前目录下的index.html文件并返回给前台。现在我们新建index.html:
<!doctype html>
<html lang="en">
<head>
<title>test</title>
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
</head>
<body>
boot done
</body>
</html>
我们用node启动http服务器:
node ./httpServer.js
这时候打开浏览器,访问localhost:8081,就可以看到index中的内容了。现在打开浏览器控制台,查看Network一项,style.css的请求路径为http://localhost:8081/style.css,index.js的请求路径为http://localhost:8081/index.js ,一切都很正常。
现在我们访问http://localhost:8081/doc这个路径,再来看浏览器控制台,style.css和index.js的路径都没有变化。路径已经改成/doc,但是代码中的相对路径的根目录却没有发生改变。
再来访问http://localhost:8081/doc/,打开控制台,就会发现style.css和index.js的请求路径变成了http://localhost:8081/doc/style.css和http://localhost:8081/doc/index.js。
这种现象的原理也很简单:访问http://localhost:8081/doc,是告诉浏览器去请求根目录下的名为doc的文件,浏览器所在路径还是根目录,所以代码中的相对路径并没有改为doc,如果访问http://localhost:8081/doc/,则是告诉浏览器去请求根目录下doc目录中的默认文件。这时浏览器解析代码中的相对路径时根目录也相应的改为了doc目录。
有的http服务器在url末尾没有加斜线,又没有找到对应的文件,但是找到相应的目录的时候,会在原url上加上斜线,并发送一个301重定向给前台,让浏览器跳转到相应地址。但如果web服务器不这么做,或者是直接读取目录下的默认文件给前台,那么后果将是直接404,或者响应数据中所有相对路径的根目录都发生改变,导致资源404。即使http服务器为错误的url响应了重定向,也是无故的多了一次请求,浪费了性能。
除了注意在指向目录时加上斜线以外,在指向静态资源时也尽量使用绝对路径以确保万无一失。