绝对路径、相对路径、根路径

本是古典何须时尚 2022-12-29 09:28 263阅读 0赞

今天探讨一下浏览器和服务器中的绝对路径、相对路径和根路径

### 浏览器中 ###

对于浏览器而言，是无法知道服务器中，文件目录路径的。因为浏览器获取的文件资源，很可能跟服务器中文件资源目录不对应。而服务器是知道每个文件和资源在具体的哪个位置存放。

**浏览器中的相对路径：**

**下面代码中的reset.css  header.css  index.css是相对路径。你以为是相对当前的html文件index.html吗？不是！**

**而是相对于当前浏览器的url路径。**

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./static/common/css/reset.css">
        <link rel="stylesheet" href="./static/common/css/header.css">
        <link rel="stylesheet" href="./static/index/css/index.css">
        <title>首页</title>
    </head>

假如当前的url地址是：

> 当前的网址：[https://www.webpackjs.com/concepts/entry-points/][https_www.webpackjs.com_concepts_entry-points]

对于浏览器而言，浏览器的对当前路径的理解是：

> 从服务器中获取服务器下[concepts][https_www.webpackjs.com_concepts_entry-points]文件夹下的名为[entry-points/][https_www.webpackjs.com_concepts_entry-points]的文件。这里的“[entry-points/][https_www.webpackjs.com_concepts_entry-points]”是一个文件，
> 
> 比如：路径localhost/a/b/c  那么c是一个文件，而c在服务器的a目录下b目录中
> 
> 比如：路径localhost/a/b/c.html 好吧，这下明白了吧，c.html是有后缀名的文件。
> 
> 有时候我们可以不用写引入的资源文件的的后缀名，我想你在开发中肯定遇到过可以不写后缀名的情况。

所以对于浏览器而言。从服务器localhost/a/b/c 或 localhost/a/b/c.html中获取的c文件，那么c文件中的相对路径，都是相对文件c的。

如果浏览器获取资源的路径和服务器中的实际路径是一样的，那么浏览器解析该文件的时候，相对路径会和服务器中的一致。

但是，问题是，服务器中的文件位置并不是一定和浏览器请求的路径一致。

**为什么呢**？

因为对于服务器而言，localhost:a/b/c 这只是一个请求地址，服务器接收到浏览器该请求的时候，可以返回服务器中任意一处的资源作为响应给给浏览器。

那么浏览器认为的文件资源地址就和真实的地址不一致。这样的话，相对路径就会出问题。

**问： 为什么服务器要处理的资源时，和浏览器请求的路径不一致？**

比如：浏览器请求localhost/a/b/c  服务器接收到这个请求，响应localhost/a/d/static/index.html 响应一个html文件给浏览器。

这样做，就不会让其他人通过浏览器的路径找到服务器中对应的资源。

**示例：**

请求地址：[http://localhost:8080/javascript/basic/js\_basic.html][http_localhost_8080_javascript_basic_js_basic.html]

network获取该资源：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

实际上服务器处理该[http://localhost:8080/javascript/basic/js\_basic.html][http_localhost_8080_javascript_basic_js_basic.html]请求的时候，可以将服务器任意一处的资源，响应给浏览器。

浏览器被欺骗了，以为服务器中有对应目录下的js\_basic.html，其实它不知道，服务器可以不去拿对应目录的资源，甚至是服务器中根本可以没有javascript/basic目录。假如服务器响应的是index.html作为这次请求的响应内容。

那么index.html内容中，如果有相对路径的资源，就会去按[javascript/basic/js\_basic.html][http_localhost_8080_javascript_basic_js_basic.html]作为相对路径，去查找文件。这样肯定是查找不到的。

建议：不写相对路径，写根路径或者写localhost/a/b/index.html这样的服务器绝对路径

**根路径 和 localhost:/ 绝对路径**

> **/ **  ——》浏览器中根路径 / 是指服务器web服务的路径。=== 等价于 localhost:/

**对于浏览器而言：四种路径，上面提到的一种资源加载情况和下面的三种情况，都符合浏览器的这些特性。**

> static/index   也是相对路径
> 
> ./static/index    相对路径
> 
> www.baidu.com/static/index   这样的服务器地址路径
> 
> /   服务器绝对路径

特别注意：如果路径书写不规范，比如写 baidu.com/static/index 是相对路径。www.baidu.com/static/index 也是相对路径。只有：location.href = 'http://www.baidu.com/static/index';是真正的服务器地址路径。

**form表单提交路径**

查看该文件中，提到的目录跳转：[https://blog.csdn.net/zyz00000000/article/details/111137701][https_blog.csdn.net_zyz00000000_article_details_111137701]

**a标签的href跳转**

> <a href="./index">  当前文件夹下的index文件 ——浏览器的特性，**当前文件夹**
> 
> <a href="index">  当前文件夹下的index文件 ——浏览器的特性，**当前文件夹**
> 
> <a href="[http://localhost:8080/][http_localhost_8080]index">    ——跳转到该路径
> 
> <a href="/index">  ——跳转到localhost/index路径

**localhost.href 属性跳转路径**

> location.href = './index';  相对路径
> 
> location.href = 'index';    相对路径
> 
> location.href = '/index';    服务器地址绝对路径
> 
> location.href = 'http://www.baidu.com/static/index';  服务器地址路径

### 服务器中（node服务器） ###

**相对路径**

相对当前文件的路径

但express.static()和fs.readFile()对文件的操作，是相对控制台的地址。所以此处我们需要使用node中的绝对路径path.join()方法。

**绝对路径：**

node中有动态绝对路径，是相对于控制台的。

**根路径： / **

服务器中 根路径就是指当前盘符的根目录，比如如果是本地开启的服务器，那么根目录可以是D：盘

在Linux中，根路径就是指 / 根目录。

[https_www.webpackjs.com_concepts_entry-points]: https://www.webpackjs.com/concepts/entry-points/
[http_localhost_8080_javascript_basic_js_basic.html]: http://localhost:8080/javascript/basic/js_basic.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: /images/20221120/719ebf09555d472ab33265d4d48fc522.png
[https_blog.csdn.net_zyz00000000_article_details_111137701]: https://blog.csdn.net/zyz00000000/article/details/111137701
[http_localhost_8080]: http://localhost:8080/