网络请求中的绝对路径与相对路径

零、前言

在html文档中，我们需要使用script标签来引入js文件，和使用ajax技术来向后端请求数据（使用xhr或fetch）。

上述两种操作，其实都需要向服务器发送网络请求，以便获取所需的资源或者数据。

而在代码中，路径可能会有以下两种写法：

// .....
  <script src="./js/demo.js"></script>
  
  <script type="text/javascript">
    function queryData() {
      // 使用fetch发送网络请求，使用xhr也可
      fetch('./abc/xyz')
        .then(response => response.json()) // 读取 response body，并将其解析为 JSON 格式
        .then(res => {
          // ......
        })
    }
  </script>
// .....

// .....
  <script src="/js/demo.js"></script>
  
  <script type="text/javascript">
      function queryData() {
        // 使用fetch发送网络请求，使用xhr也可
        fetch('/abc/xyz')
          .then(response => response.json()) // 读取 response body，并将其解析为 JSON 格式
          .then(res => {
            // ......
          })
      }
  </script>
// .....

上述两种方式都是正确的写法，第一种使用的是相对路径 的写法，第二种则是绝对路径 的写法。

此时它们都不是完整的url（协议+主机号+端口号+路径），而浏览器会根据代码写法的不同，采取不同的规则去拼接成完整的url，再向服务器发送请求。

一、绝对路径

上述/abc/xyz的写法只是绝对路的其中一种写法，事实上有以下三种写法

1.1 协议+主机名+端口号+路径

第一种方式其实就是完整的url写法：协议+主机名+端口号+路径

http://website:80/abc

这是一个完整的url地址（使用http协议时，80端口为默认端口，可以省略），不需要进行额外的拼接，可直接向目标资源发送请求。

一般会在访问网站外链时使用。

1.2 主机名+端口号+路径

第二种方式就是省略协议，只写主机名+端口号+路径（注意要以"//"作为开头）

//website:80/abc

上述写法相比一个完整的url，其实就是缺少了协议，浏览器在发送请求前，会使用当前页面url中的协议 来进行拼接，如当前页面的url使用的是http协议，那么就会拼接为http://website:80/abc再发送请求。

1.3路径

第三种写法就是只保留路径（注意是以"/"作为开头）：

/abc

上述写法对比完整的url，缺少的是协议+主机名+端口号，此时url拼接逻辑和第二种写法一样，复用当前页面url的协议+主机名+端口号，成为一个完整的url后再发送请求。

1.4 总结及注意点

使用绝对路径的方式，拼接成完整url的逻辑，其实就是复用当前页面的url，缺啥补啥。

可以省略协议 ，或省略协议+主机名+端口号 ，但是不可以省略协议+主机名（但保留端口号）

二、相对路径

2.1 理解路径

http://website:80/abc/xyz/target

如上所示是一个完整的url，个人认为可以将路径部分"abc/xyz/target"理解成是计算机中的文件的路径：

• target就是这次请求我们的"最终目标"
• xyz是target的"父文件夹"
• abc是xyz的"父文件夹"
• abc则存放在"根目录"中

在后续理解相对路径的拼接规则时，就理解成计算机中对于某个文件的相对路径就可以了。

相对路径的写法是不需要写协议、主机号、端口号的，只需要写路径部分 ，所以在拼接成完整url时，会复用当前网页的协议、主机号和端口号 。

后续例子中，会假设当前页面的url为http://website:80/abc/xyz/target

2.2 方式一

以"./"作为开头

./aa/bb

如上所示是相对路径的一种写法，它与计算机中的相对路径一致，表示"当前文件夹下的资源" 。

相对于网页当前url中的"/abc/xyz/target"而言，可以简单理解为"在xyz文件夹中的aa文件夹下的bb文件"，也就是"/abc/xyz/aa/bb"了。

与网页当前url的协议、主机号、端口号拼接后的完整url为：http://website:80/abc/xyz/aa/bb

2.3 方式二

前缀为空（空字符串）

aa/bb

这种方式表示的意思和方式一的一模一样，代表的也是 "当前文件夹下的资源"。

同理可得拼接后的完整url为：http://website:80/abc/xyz/aa/bb

2.4 方式三

2.4.1 常规情况

以"../"作为开头

../aa/bb

这种方式其实也和计算机中表示文件的相对路径的用法一样，表示的是 "上级文件夹中的资源"。

对于/abc/xyz/target这个"文件结构"而言，需要找到xyz的上级目录，然后拼接上aa/bb。

拼接成完整的url为：http://website:80/abc/aa/bb

2.4.2 特殊情况

上述3.3.1中的"../"可以连续使用，如下所示

../../../../aa/bb

如上写法是合法的，如果当前页面的url层数足够多，则一层一层往上寻找，最后拼接上"aa/bb"即可。

但是对于我们的例子：http://website:80/abc/xyz/target而言，层数显然是不足够的。

但即使如此，浏览器在完善这个相对路径时，也不会报错，而是直接使用网站的根目录 来拼接aa/bb，完整url为：http://website:80/aa/bb

三、总结

以我个人理解，在项目中，绝对路径的使用频率会比相对路径高。

因为相对路径会受当前网页的url所影响，而现在较多网站是单页面应用，使用前端路由去改变url的路径部分，所以使用相对路径可靠性会较低。

而绝对路径则不受url中路径的影响，它只关注url中的协议、主机号、端口号，而即使网站使用的是前端路由，也不会对它们进行修改，所以更加可靠。

当然，对于项目而言，没有最好的技术，只有更适合的方案。具体方案的选择还应该结合项目需求及部署情况进行选择。