Azure 存储 CORS答案

【问题标题】：Azure Storage CORSAzure 存储 CORS
【发布时间】：2019-12-16 11:07:44
【问题描述】：

我在 www.somedomain.com 上有一个应用程序。现在我的所有文件（最终用户上传）都存储在 Azure 存储中，该存储具有类似于 somesubdomain.blob.core.windows.net 的域。每当用户想要查看文档时，Azure 上文档的公共链接都会添加到 iframe 源中，并且可以查看。唯一的问题是，在许多情况下，该文件是一个包含 Javascript 的 html，它试图访问最初位于我的第一个主机上的父级上的一些基本的安全免费变量。

每次 azure 存储上的 html 文件尝试访问父文档变量时，我都会收到错误消息“阻止了带有原点 'http://somesubdomain.blob.core.windows.net' 的帧，无法访问带有原点“http://somedomain.com”的帧。协议、域、和端口必须匹配。'

任何有关这方面的指导和帮助都会有所帮助。

【问题讨论】：

您是否为 Blob 存储配置了 CORS 规则？
我该怎么做。我检查了 azure 文档并没有发现它很有用。谢谢

标签： javascript azure azure-blob-storage

【解决方案1】：

在 Azure 存储帐户上启用 CORS 的最简单方法是使用 azure-cli

npm i azure-cli -g

那么，就可以通过命令行配置CORS了：

azure storage cors set
  -a "storage-account"
  -k "storage-account-key"
  --blob/table/queue/file
  --cors "[{\"AllowedOrigins\":\"*\",\"AllowedMethods\":\"GET\",\"MaxAgeInSeconds\":\"86400\",\"AllowedHeaders\":\"*\",\"ExposedHeaders\":\"*\"}]"

【讨论】：

嗨，我在 azure-cli 上执行了此操作，在命令行上显示一切正常等。但错误 Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3210' is therefore not allowed access. The response had HTTP status code 403. 仍然存在。
顺便说一句我做了"AllowedHeaders":"*"
预检请求是OPTIONS，您需要指定"AllowedMethods":"GET,OPTIONS" 以及您正在使用的其他方法。
是的，我确实在“AllowedMethods”中指定了“OPTIONS”：“GET,OPTIONS”。实际上我添加了所有内容，PUT、GET、POST、OPTIONS...
顺便说一句，我决定从服务器端上传，但我有问题，你能看看我的这个问题。非常感谢！ stackoverflow.com/questions/36263130/…

【解决方案2】：

您需要在存储帐户的 blob 服务上启用 CORS 才能跨域 JavaScript 访问。您可以在此处了解有关 Azure 存储和 CORS 的更多信息：https://msdn.microsoft.com/en-us/library/azure/dn535601.aspx。

我前段时间也写了一篇关于同一方面的博文，你可以在这里阅读：http://gauravmantri.com/2013/12/01/windows-azure-storage-and-cors-lets-have-some-fun/。

如果您使用的是 .Net Storage Client 库，您可以使用以下代码设置 CORS 规则：

static void AddCorsRuleStorageClientLibrary()
{
    //Add a new rule.
    var corsRule = new CorsRule()
    {
        AllowedHeaders = new List<string> { "*" },
        AllowedMethods = CorsHttpMethods.Get
        AllowedOrigins = new List<string> { "http://somedomain.com" },//This is the URL of your application.
        MaxAgeInSeconds = 1 * 60 * 60,//Let the browser cache it for an hour
    };

    //First get the service properties from storage to ensure we're not adding the same CORS rule again.
    var storageAccount = new CloudStorageAccount(new StorageCredentials(accountName, accountKey), true);
    var client = storageAccount.CreateCloudBlobClient();
    var serviceProperties = client.GetServiceProperties();
    var corsSettings = serviceProperties.Cors;

    corsSettings.CorsRules.Add(corsRule);
    //Save the rule
    client.SetServiceProperties(serviceProperties);
}

【讨论】：

我有一个问题，该代码应该放在哪里以及何时调用？
所以你不要把这段代码放在你的应用程序中。您要做的是创建一个单独的应用程序来设置 CORS 规则，或者您可以使用任何能够管理 CORS 规则的存储资源管理器。

【解决方案3】：

这里的答案与 Pier-Luc Gendreau 的答案相似，但与新的 azure-cli v2.0 有关。

az storage cors add --account-name $ACCNT_NAME --account-key $ACCNT_KEY \
    --methods GET --origins '*' --services t --allowed-headers '*'

请注意，v2.0 是基于 python 的，而不是基于 Node.js 的 v1.0。

官方安装说明在here，但对我来说，以下似乎是保持系统清洁的更好选择：

virtualenv --system-site-packages -p python3 ~/azure-cli/
source ~/azure-cli/bin/activate
pip3 install azure-cli

这是帮助消息的摘录，与您可能希望针对特定情况更改的所需参数相关。

--methods  [Required]: List of HTTP methods allowed to be executed by the origin.  Allowed
                       values: DELETE, GET, HEAD, MERGE, OPTIONS, POST, PUT.
--origins  [Required]: List of origin domains that will be allowed via CORS, or "*" to allow all
                       domains.
--services [Required]: The storage service(s) to add rules to. Allowed options are: (b)lob,
                       (f)ile, (q)ueue, (t)able. Can be combined.

【讨论】：

【解决方案4】：

另一种解决方法是为自己创建一个指向存储文件的自定义域 - 例如 filestore.somedomain.com。

【讨论】：