【问题标题】：Subfolders in static Azure hostings静态 Azure 主机中的子文件夹
【发布时间】：2022-02-09 13:45:31
【问题描述】：

我想使用 Azure blob 文件存储来托管静态网站。

如果 html 页面位于 $web-storage 的根文件夹中，这可以正常工作。

但是，如果我将网页放入子文件夹，则相关链接（例如指向 css 文件）不再起作用 - 因为它们被解释为基于根的链接

<link href="css/bootstrap.css" rel="stylesheet">

index.html 位于“subfolder1”

但不是

https://blablabla.web.core.windows.net/subfolder1/css

解决了

https://blablabla.web.core.windows.net/css

这是 Azure 的错误还是我的 html 中的误解/错误？

【问题讨论】：

index.html 是你的根文档吗？
index.html 位于 /subfolder1/ ...如果我将它直接放在根目录 "/" 下，一切正常，从那时起 /css 存在......但都放在 /subfolder1/index 下。 html 和 subfolder1/css 失败
我想我要问的问题是你是如何访问 index.html 的？是https://blablabla.web.core.windows.net 还是https://blablabla.web.core.windows.net/subfolder1/index.html？
最后一个：blablabla.web.core.windows.net/subfolder1/index.html

标签： html azure static azure-storage

【解决方案1】：

实际上，$web 是 Azure 通用存储 V2 上的一个特殊容器，它是类似于 Apache HTTP 服务器的 www 或 IIS 的 wwwroot 的根路径，用于托管所有静态文件夹和文件。所有文件夹及其子文件夹都必须在 $web 容器中创建。您可以在 Azure 门户上查看其信息，如下图所示。

这是我在 Azure 存储资源管理器中的 $web 容器下创建两个文件夹 a 和 b 及其 index.html 的示例。

如果访问我的主要端点https://<account name>.z7.web.core.windows.net，我的静态网站的索引网页是一个Angular示例网页，如下所示，

然后，要访问子文件夹a和b，这些子文件夹的索引页面如下。

文件夹`a`的index.html

<html>
<body>
<h2>A</h2>
</body>
</html>

希望对了解 Azure 通用存储 V2 上的静态网站结构有所帮助。

更新您的评论：

我更新了我的a/index.html文件并添加了一个新文件a/a.css，代码如下。

a/index.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<h2>A</h2>
<span id='test'>Hello</span>
</body>
</html>

a/a.css

#test {
    color: red;
}

浏览器实现了一些行为。

问：http://host/a 和http://host/a/ 有什么区别？答：要在 Chrome 中访问它们，这两个 url 将响应来自 a/index.html 的相同内容。但是，它们的基本路径不同：/ 对应于 http://host/a，而/a/ 对应于http://host/a/，这将导致加载a.css 的相对路径资源时的行为不同，如下图所示。

图一。

图 2.

【讨论】：

谢谢彼得...问题更进一步：如果您在 index.html 文件夹“a”中包含带有 href="my.css" 的 css 或 js，则不会搜索它index.html 位于同一文件夹（“a”）中，但位于根目录 /my.css
感谢您的努力！这是 azure 的特殊行为还是 apache 和 iis 等常见网络服务器上的正常行为？问题：用户永远不会在网址末尾添加额外的“/”。
嗨 @PeterPan 感谢您提供有关 URL 的提示。是不是可以绕过这种行为？并确保a/index.html 使用良好的基本 URL？
@Konrad 所描述的行为是标准的网络行为：如果 HTML URL 是/name，并且 HTML 加载了相对路径为 othername 的资源，那么浏览器将寻找 /othername - 因为两者看起来都像/ 中的文件。您所期望的 - 以及其他服务器如何执行此操作 - 是当您访问 /name 时，服务器知道它是一个“文件夹”并将浏览器自动重定向到 /name/ 并且仅当请求以 / 结束时索引是否被加载。然后当一个相对的othername ref 出现时，浏览器将其理解为/name/othername。 Azure 显然不这样做？

【解决方案2】：

您可以设置base tag 以使绝对 URL 正常工作。因此，将其添加到 html > head 下应该可以解决问题

<html>
  <head>
    <base href="/subfolder1/" />
    ...
  </head>
  ...
</html>

【讨论】：

文件夹a的index.html

a/index.html

a/a.css

文件夹`a`的index.html