浏览器如何解析'./'的相对位置？

编程问答 2022-11-23

问题描述

我将许多小型的半静态单页 web 应用程序合并到一个更大的网站中。后端是很多代理，但前向服务器基本上只是让应用程序看起来像是从根文件路径移动到更具体的路径。 IE：

/
├── css
│   └── app1.css
├── index.html
└── js
    └── app1.js

将移至

/apps/app1/
├── css
│   └── app1.css
├── index.html
└── js
    └── app1.js

这种迁移相对轻松，主要是因为在应用的 html 文件中使用了 ./，因此大多数应用只是加载相对于其新位置的资源。我遇到的问题是某些应用程序以不同的方式解析 ./。对于这些故障情况，主要的 html 文件被加载；然而，./ 和 script 元素中的 style 解析为更高的文件路径（IE：我希望 ./ 解析为 /apps/app1 但是我得到 /apps）。这可能是巧合，但出现问题的应用通常有额外的非索引 HTML 文件。

如何解析 ./ 的规则是什么？

解决方法

  1. 确定基本 URL
    • 这通常是 HTML 文档的 URL
    • 它可能会被 base element
      • 覆盖
    • 对于 CSS，它是样式表的 URL
      • JS 总是相对于 HTML 文档
  2. 删除 URL path 部分中最后一个 / 之后的所有内容
    • 例如https://example.com/example/foo?bar=baz#fragment 的基本 URL 是 https://example.com/example/
    • 请记住，HTML 文档可能在路径 /example 和 /example/ 处可见，您应该通过使路径规范化来避免这种情况（我更喜欢以 {{1} }) 并从另一个重定向到它
  3. 去掉相对路径前面的 /
  4. 将第 3 步的结果附加到第 2 步的结果

一个常见的问题是将 URL 与文件路径混淆。虽然一个简单的静态站点通常在它们之间具有直接的 1:1 映射，但许多现代站点将使用路由代码（例如 for Express 用于 HTML 文档，单独的 static route 用于静态文件，如图像、js 和

browserbrowserhtmlrelative-pathurl