问：为 Azure 静态 Web 应用配置 CORS（预览版）答案

【问题标题】：Q: Configure CORS for Azure Static Web Apps (preview)问：为 Azure 静态 Web 应用配置 CORS（预览版）
【发布时间】：2020-11-20 05:14:03
【问题描述】：

我将图像、CSS 和 JavaScript 包等工件部署到 Azure Static Web App（预览版）。如果我使用来自另一个站点的 JavaScript 包，我会收到 CORS 错误。在静态 Web 应用程序（预览版）的 Azure 配置中，没有配置 CORS 的选项。关于如何配置 CORS 的任何想法？

【问题讨论】：

docs.microsoft.com/en-us/rest/api/storageservices/… 不相关吗？
关于CORS，是在加载JavaScript文件的时候遇到的吗？还是你实现了特定的方法？
Azure 静态 Web 在调用 API 时具有反向代理的无缝安全模型，无需 CORS 配置。
@sideshowbarker 不，Azure 静态 Web 应用似乎与 Azure 存储上的静态站点不同。 Jason Pan，我没有调用 API，我使用该站点来托管我想从另一个网站加载的 JavaScript 和 CSS 包（作为一种 CDN）
@SergevandenOever 我进行了测试，但没有重现您的问题。如果操作步骤有问题，请告诉我，我们会一起解决您的问题。

标签： cors azure-web-app-service azure-storage

【解决方案1】：

我在这里找到了适合我的答案：

https://docs.microsoft.com/en-gb/azure/static-web-apps/configuration#global-headers

在 repo 的根目录中创建 staticwebapp.config.json 并添加以下配置有效：

{
  "globalHeaders": {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, OPTIONS"
  }
}

这些是全局标头，因此并不理想，但在我的情况下使用“*”就可以了。

【讨论】：

完美！我在一个AngularJS项目中解决了我的问题，你提到的步骤

【解决方案2】：

建议

如果操作和我的类似，还是出现cors问题，那我建议你在传送门上提出支持票。理论上应该不存在这个问题。
如果我的复现步骤有问题，或者您方便的话，您可以创建并提供您的测试文件的链接（例如test.js），我会再次测试。

私人

再次仔细阅读您的问题后，我认为这个问题不应该出现。

一般情况下，当我们成功发布我们的静态网页应用程序后，就可以直接访问我们的静态资源，比如.js文件。

目前你有一个问题，所以我试了一下，想重现你的问题。如果有与您不一致的步骤，请告诉我。我们一起解决这个问题。

这是我的重现步骤：

创建myStaticWeb project，其中包含css 和js 文件夹，以及index.html 文件。作为我的静态网页应用的主项目，js文件夹中的jquery.js文件作为cdn的源文件。

发布到github后，文件目录如下。

jquery.js 文件的路径是https://proud-dune-0b3b7a110.azurestaticapps.net/js/jquery.js。

您也可以直接访问它。

创建另一个静态 Web 应用或 .net 核心 Web 应用进行测试。

【讨论】：

@json-pan，抱歉回复晚了，我刚放假回来！感谢您所做的所有研究。我要访问的 css 和 js 文件的示例位于 mango-river-020e4d803.azurestaticapps.net/index-slotted.html。例如捆绑文件mango-river-020e4d803.azurestaticapps.net/build/…，当我从其他站点访问它时，我会收到 CORS 错误。会不会是消费端的配置问题？
@SergevandenOever 你是怎么做到的？我正在和你做同样的事情（在静态 Web 应用程序上托管 javascript 包并从另一个站点引用它们），但我没有收到上面链接的文件的 CORS 错误，而且我的请求确实收到了 CORS 错误自己的网络应用程序。谢谢
哦，等等。如果我使用 fetch() 我仍然会收到 CORS 错误。但是如果我在脚本标签中引用它，我不会。