谈一谈URL中位于最末尾的那条斜杠

最新推荐文章于 2025-02-10 10:25:09 发布

原创最新推荐文章于 2025-02-10 10:25:09 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5

本文探讨了URL末尾斜杠在Web开发中的作用，通过实验演示了斜杠如何影响资源加载路径，强调了在指向目录时加上斜杠及使用绝对路径的重要性。

问题：在浏览网页的时候，如果你留意每一个页面的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响应了重定向，也是无故的多了一次请求，浪费了性能。

除了注意在指向目录时加上斜线以外，在指向静态资源时也尽量使用绝对路径以确保万无一失。