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

Question

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

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

将移至

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

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

./的解析规则是什么？

Answer 1

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

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

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

How does the browser resolve the relative location of './'?

html

browser

url

relative-path