管理 Azure 静态网站的 HTTP 标头答案

【问题标题】：Manage HTTP Headers for Azure static website管理 Azure 静态网站的 HTTP 标头
【发布时间】：2019-04-23 08:32:56
【问题描述】：

似乎没有一种明确定义的方式来使用 Azure 静态网站管理 HTTP 标头。我知道此功能仍处于预览阶段，但我和我的团队正在尝试将其制作为可用于生产的 Web 应用程序。

我认为大多数使用静态网站功能的人将使用 JavaScript 框架，如 Reactjs 或 Angular，就我而言，reactjs。由于没有 web.config 来管理 http 标头，因此不清楚如何处理这个问题。有问题的标头是内容安全策略、X-Content-Type-Options 和 X-XSS-Protection。

为了清楚起见，我在 Azure 上使用了新的静态 Web 托管，如下所述：https://azure.microsoft.com/en-us/blog/azure-storage-static-web-hosting-public-preview/

谢谢！

【问题讨论】：

是的，您目前可以做的事情非常有限。一种选择是在它前面设置一个 Azure Function 代理，可以根据需要添加标头。
@juunas 我实际上正在尝试这个，我遇到了问题。您是否在使用 react 项目的构建输出时完成了此代理？当我加载代理的 url 时，对已编译的 js 和 css 文件的引用为 404。我使用这篇文章：blog.headforcloud.com/2018/07/29/static-hosting-headers 作为参考，只是为了确保我们在同一页面上
实际上，您需要检查的主要内容是代理中的路由模板是否正确，并且 SAS 令牌对访问文件有效。您也可以尝试公开容器以隔离问题。如果存储认为您无法访问该文件，它会返回 404。
@juunas 有没有关于如何设置路线模板的屏幕截图或示例？我认为这是缺少的部分
我在这里放了一个带有路由的匿名版本：pastebin.com/E6zL8Mat

标签： reactjs http-headers azure-web-app-service azure-storage

【解决方案1】：

如果静态网站的性能是一个因素，那么我建议您使用 Azure CDN，如果您使用 Verizon Premium 定价层，您将能够管理客户端请求和响应中的标头。

【讨论】：

【解决方案2】：

我自己回来回答这个问题。我已经提出了一个新的解决方案，这一切都包含在 Azure 中。当使用 Azure 存储容器的静态 Web 解决方案来托管像 React 构建这样的网站时，我就是这样做的：

Domain name (www.blahblah.com) -> Azure function proxy (functionname.azurewebsites.com) -> Azure CDN (cdnname.azureedge.net) -> Storage Container Static Web URL (https://storageaccountname.z20.web.core.windows.net/)

这将允许您使用 CDN，并添加任何必要的 HTTP 标头。在此解决方案中，HTTP 标头添加在 Azure 函数代理级别。我将附上我的一个功能代理的样子。请原谅我粗鲁的编辑

【讨论】：