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

Question

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

/
├── 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 文件。

./ 的解析规则是什么？

Answer 1

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/ 中可见，您应该通过使一个路径规范（我更喜欢以 / 结尾的路径）并重定向到它来避免这种情况从对方
3. 从相对路径的前面去掉./
4. 将步骤 3 的结果附加到步骤 2 的结果

---

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