除 / 以外的路由上“请求的内容不存在” - 将应用程序反应为静态网站

Question

我创建的 React 应用程序在本地运行良好。然后我创建了一个存储帐户，启用了静态网站，并将

build

文件夹部署到

$web

。乍一看它可以工作，但是当我单击任何转到另一条路线的内容时，例如

/car/eleanor

，它会显示错误“请求的内容不存在。”

副驾驶告诉我创建

web.config

或

staticwebapp config.json

并将其放入公共目录中，但它不起作用，同样的错误。

我正在访问位于

...z36.web.core.windows.net

的存储帐户地址的页面，未配置 CDN/FrontDoor。我的意思是我已配置，但它显示来自 AFD url 的相同错误。

我在 SO 的另一篇文章中发现一条评论，其中建议将 index.html 设置为错误端点，但这听起来不是正确的方法。

编辑：我发现

$web

的访问级别不应该像我一样是“私有”。我只是将其更改为“Blob”或“Container”，但它还是一样。

编辑2：存储帐户设置：

Edit3：我禁用了静态网站，然后再次启用，几秒钟后，即使在主页上也出现了错误，但问题是相同的，只有主页有效。

有谁知道这是怎么回事吗？

Answer 1

当我单击任何转到另一条路线的内容时，例如

/car/eleanor

，它会显示错误“请求的内容不存在。”

根据此MS-Document，

• Azure Blob 存储的静态网站功能旨在直接从

  $web

  容器提供静态文件（例如 HTML、CSS、JS）。
• 当您导航到像

  /car/eleanor

  这样的路线时，Azure 会尝试在

  $web

  容器中查找具有确切路径

  /car/eleanor

  的文件，如果不存在，则会出现错误。

将index.html设置为错误页面的解决方案可行，但查看一些解释会有所帮助

• Azure Blob 存储直接提供文件服务，并且没有针对单页应用程序 (SPA)（如 React 应用程序）的

  catch-all

  路由概念。
• 通过将

  index.html

  设置为错误文档路径，只要发生 404 错误，Azure 就会提供

  index.html

  。这对于 SPA 至关重要，因为所有路由通常都由 JavaScript 在客户端处理。
• 在React（使用

  BrowserRouter

  ）中，路由是在浏览器中管理的，而不是在服务器上管理的。 当

  index.html

  服务于未知路由（例如

  /car/eleanor

  ）时，React 的路由逻辑会解析 URL 并确定要渲染的适当组件。

这就是为什么在我的环境中将 Index.html 设置为错误页面的效果与您的效果相同。

在我的环境中，我尝试使用示例，路径为

sample/test

并使用一个 jpg 文件。

传送门：