如何在使用 Azure Blob 和 Azure Functions Proxies 托管 Angular 4 应用程序时允许浏览器刷新

Question

我使用 angular-cli 构建了我的 Angular 应用程序。

注意我使用的是 PathLocationStrategy 路由策略，由于其他限制我不能使用 HashLocationStrategy。

我已将所有静态文件上传到 Azure 存储 Blob 中的“前端”容器中。除了我遇到的两个限制之外，该应用程序运行良好：

1. 用户必须输入完整的 URL，而不仅仅是域名（即https://someblob.blob.core.windows.net/frontend/index.html）
2. 当用户按下浏览器刷新时，返回 404 错误。

使用 Azure Functions Proxies 和以下 proxies.json 文件，我设法解决了第一个限制。 IE。用户可以通过浏览 some-azure-function.azurewebsites.net 来访问该应用程序。但不是第二个。

有没有办法同时使用 Azure Functions Proxies 解决第二个限制？

proxys.json：

{
  "$schema": "http://json.schemastore.org/proxies",
  "proxies": {
    "refresh": {
      "matchCondition": {
        "route": "/frontend/"
      },
      "backendUri": "https://someblob.blob.core.windows.net/frontend/index.html"
    },
    "allfiles": {
      "matchCondition": {
        "route": "/frontend/{*rest}"
      },
      "backendUri": "https://someblob.blob.core.windows.net/frontend/{rest}"
    },
    "root": {
      "matchCondition": {
        "route": "/"
      },
      "backendUri": "https://someblob.blob.core.windows.net/frontend/index.html"
    }
  }
}

Answer 1

听起来您遇到了一个问题，即 Angular 代码在 URL 后面附加路由信息，并且 blob 存储无法提供该文件。

您的中间代理会将整个 URL 文本附加到对 blob 存储的请求中，因此像 https://myfunctionapp.azurewebsites.net/frontend/index.html/foo/bar' will send a request to blob storage ashttps://someblob.blob.core.windows.net/frontent/index.html/foo/bar`这样的请求

要么将您的中间代理更新为https://someblob.blob.core.windows.net/frontent/index.html 的后端 Uri，然后将每个页面重定向回主页，要么更改匹配条件以解析出额外的信息。

"route": "https://someblob.blob.core.windows.net/frontend/frontend/{page}/{*rest}" 将捕获 {page} 中的页面名称