Azure：使用 CDN 部署为 Azure Blob 静态网站的 SPA 刷新页面上的 WebContentNotFound答案

【问题标题】：Azure: WebContentNotFound on refreshing page of SPA deployed as Azure Blob Static Website with CDNAzure：使用 CDN 部署为 Azure Blob 静态网站的 SPA 刷新页面上的 WebContentNotFound
【发布时间】：2019-08-24 00:10:51
【问题描述】：

我有一个 SPA（使用 Angular 构建）并部署到 Azure Blob 存储。从默认域开始一切正常，但是当我刷新任何页面/路由时，index.html 不再被加载，而是收到错误“请求的内容不存在”

谷歌搜索该术语总共会产生 3 个结果，所以我在尝试诊断和解决此问题时不知所措。

【问题讨论】：

标签： azure azure-storage azure-blob-storage

【解决方案1】：

您可以在静态网站中简单地将错误页面配置为index.html：

【讨论】：

我只想注意，响应状态将保持404，但正文中将包含index.html 内容。
@Ahmed Sehndy 在上述方法中，您仍然会在浏览器中收到 404 错误。
有什么办法可以在浏览器中抑制404？
这不是正确的答案，它似乎在您打开开发人员工具之前有效，正如@savbace 指出的那样，您仍然会得到 404
我同意这里的其他人。这不是解决办法。这是一个 hack - 真正的解决方法是在您的托管服务器上添加一个带有一些 URL 重定向规则的 CDN。这是一个很棒的指南：antbutcher.medium.com/…

【解决方案2】：

实际上，问题是我没有定义 404.html —— SPA 的 blob 存储不了解要为根路径以外的任何其他路径提供什么文件。因此，其他所有路由都将转到 404 文件。但在 SPA 中，即使 404 也会通过索引文件。所以我所做的只是提到 index.html 作为我的 404 文件，一切都很好。

【讨论】：

【解决方案3】：

对我来说，将 index.html 页面添加为错误文档页面在通过 url 导航时没有帮助，因为它仍然会重新加载应用程序。我在其他地方发布了一个与使用 Angular HashLocationStrategy 相关的答案，并且在手动更改 URL 时不会导致页面重新加载。

Answer on other SO question

【讨论】：

这听起来更像是一个应用程序问题，每当您访问 URL 时，您只需下载整个网站的整个代码，然后应用程序本身将根据路由选择显示的内容，我使用我自己有角度，从来没有遇到过这个问题。
嗨@MichaelB，从 Azure 存储帐户提供 Angular 应用程序时会出现问题。它尝试从不存在的存储帐户返回请求的资源（来自 url），因为它只是一个 Angular 路由。
我不明白你的意思，这就是整个线程的内容。你是对的。解决方法是简单地将您的索引 html 指定为 404 处理程序。我目前在生产应用程序中大规模使用它
我的意思很简单，即使在存储帐户上添加 index.html 作为错误页面后，在更改 url 或重新加载时它仍然对我不起作用，直到我将其更改为使用 HashLocationStrategy。
我说这很奇怪，并且无法在生产中运行的多个应用程序上重现，问题可能出在您的应用程序上，而不是天蓝色 blob 存储。

【解决方案4】：

Microsoft 提供了一个新的静态 Webapps 解决方案。它目前处于预览模式，但我认为这是在 Azure 基础架构中使用/部署 SPA 的最便捷方式。例如，您可以将自定义域与免费 SSL、版本控制一起使用，并设置一个路由以将所有内容重定向到 index.html（备用路由：https://docs.microsoft.com/en-us/azure/static-web-apps/routes）。在此处查看更多详细信息：https://docs.microsoft.com/en-us/azure/static-web-apps/

【讨论】：

不错！有一段时间，SPA 的这种 blob 部署似乎比什么都重要。
但是它仍然向浏览器控制台发出红色 404 错误消息。
@EF 看来404 行为现在已修复。至少有关 fallback routes 的文档声明它应该返回 200。

【解决方案5】：

通常，您已经创建了 CDN 配置文件和端点，但您的内容似乎在 CDN 上不可用。尝试通过 CDN URL 访问您的内容的用户会收到 HTTP 404 状态代码。您可以在troubleshooting Azure CDN endpoints that return a 404 status code中遵循这些方法

有几种可能的原因，包括：

文件的来源对 CDN 不可见。端点是配置错误，导致 CDN 查找错误的位置。主机是拒绝来自 CDN 的主机标头。端点没有时间在整个 CDN 中传播。

使用CDN，在初始请求时，客户端直接访问源服务器，之后，在以下请求中，当您刷新页面时，客户端向CDN缓存服务器请求直到它们的生存时间（TTL ) 过去。请参阅Manage expiration of Azure Blob storage in Azure CDN 和Control Azure CDN caching behavior with caching rules。

在这种情况下，您可以确保网站 blob 内容在 Internet 上公开可用。之后，您可以验证您的原始设置是否已正确配置。验证 Origin 类型和 Origin 主机名的值是否正确。验证 HTTP 和 HTTPS 端口是否表示为您的静态网站正在侦听。请您从该疑难解答链接中获取更多详细信息。

【讨论】：

实际上问题是我没有定义 404.html —— SPA 的 blob 存储不知道为根路径以外的任何其他路径提供什么文件。因此，其他所有路由都将转到 404 文件。但在 SPA 中，即使 404 也会通过索引文件。所以我所做的只是提到 index.html 作为我的 404 文件，一切都很好。

【解决方案6】：

TL/DR

您也可以将错误文档 (404) 设置为您的 index.html

这是一个快速修复，仍然会返回 404，但实际上也会跟随您的深层链接。

这不是“修复”。这更像是一种 hack - 真正的解决方法是在您的托管服务器上添加一个带有一些 URL 重定向规则的 CDN。这是一个很棒的指南：https://antbutcher.medium.com/hosting-a-react-js-app-on-azure-blob-storage-azure-cdn-for-ssl-and-routing-8fdf4a48feeb

规则本身

但是为了节省您的点击，使用标准微软 CDN（更便宜的）的 CDN 规则是这样的：

(add the condition with the '+ condition' button)
If URL file extension > less than 1 extension > no case transform

(add the action with '+ Add action' button)
source pattern: '/' > Destination: '/index.html' > preserve unmatched path: no

说明

我会尝试添加一个我认为没有其他人做得很好的解释。

这条规则的作用是说出任何不是直接文件的 URL 请求，例如。

example.com/xyz
example.com/user/xyz
example.com/tabs/post/12345

或任何没有直接文件扩展名（如“.png”或“.pdf”或“.html”）

然后我们将 URL 重写为“index.html”，这是 SPA 有 javascript 来处理示例中的路径的深层链接的主机文件 - 因此您不会得到 404，代码将正常处理.

【讨论】：