如何在门户的 Azure BLOB 存储中设置 CORS？

Posted

技术标签:

【中文标题】如何在门户的 Azure BLOB 存储中设置 CORS？【英文标题】：How can I set CORS in Azure BLOB Storage in Portal? 【发布时间】：2015-05-07 19:16:24 【问题描述】：

我们在 Windows Azure 上有一个 blob 存储。

http://mytest.blob.core.windows.net/forms

我使用 CloudBerry 将一些文件上传到存储。我可以通过浏览器成功下载文件。 这些文件是简单的文本文件，但具有不同的文件扩展名。 例如，

http://mytest.blob.core.windows.net/forms/f001.etx

我想通过 jquery ($.get) 下载文件，但是由于 CORS 失败。

如何在 Portal 的 Azure BLOB 存储中配置 CORS？

而且，我也应该在客户端为 CORS 做点什么吗？

【问题讨论】：

【参考方案1】：

使用 Azure 门户中的新界面，您只需导航到您的存储帐户即可启用 CORS

然后使用必要的设置启用 CORS

【讨论】：

所有方法都是一个好习惯吗？ @sajeetharan @SharonWatinsan，在生产环境中，最好只添加需要的方法。但是，处理 CORS 问题仍然必须添加“OPTIONS”。【参考方案2】：

如果您想以 REST API 的形式访问 Blob 存储 JSON 文件，那么您应该从存储帐户启用 CORS。 进入 storage account > CORS > Blob service > 然后设置所有需要的值。

【讨论】：

【参考方案3】：

为确保您的 B2C 定制有效，您需要注意以下事项：

    确保您的内容符合 html5 标准且易于访问 确保您的内容服务器已启用 CORS。 链接：How can I set CORS in Azure BLOB Storage in Portal? （非常重要）通过 HTTPS 提供内容。 （可选）对所有链接和 CSS 内容使用绝对 URL，例如 https://yourdomain/content。

提示：要验证您托管内容的站点是否启用了 CORS 并测试 CORS 请求，您可以使用站点 http://test-cors.org/。感谢这个站点，您可以简单地将 CORS 请求发送到远程服务器（以测试是否支持 CORS），或将 CORS 请求发送到测试服务器（以探索 CORS 的某些功能）。

参考链接： https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-reference-customize-ui-custom

【讨论】：

非常有用，谢谢！有谁知道为什么它仍然说“静态网站不支持 Azure 存储的跨源资源共享 (CORS) 支持”。这里：docs.microsoft.com/en-us/azure/storage/blobs/…【参考方案4】：

更新：在回答此问题时，Azure 门户没有此功能。它现在是outlined here。下面概述了在添加 UI 之前执行此操作的方法。

如何在 Portal 的 Azure BLOB 存储中配置 CORS？

如果您愿意，您可以随时以编程方式设置 Blob 存储的 CORS 规则。如果您使用的是 .Net 存储客户端库，请查看存储团队的这篇博文：http://blogs.msdn.com/b/windowsazurestorage/archive/2014/02/03/windows-azure-storage-introducing-cors.aspx。从该博客文章中设置 CORS 设置的代码：

private static void InitializeCors()

     // CORS should be enabled once at service startup
     // Given a BlobClient, download the current Service Properties 
     ServiceProperties blobServiceProperties = BlobClient.GetServiceProperties();
     ServiceProperties tableServiceProperties = TableClient.GetServiceProperties();

     // Enable and Configure CORS
     ConfigureCors(blobServiceProperties);
     ConfigureCors(tableServiceProperties);

     // Commit the CORS changes into the Service Properties
     BlobClient.SetServiceProperties(blobServiceProperties);
     TableClient.SetServiceProperties(tableServiceProperties);


private static void ConfigureCors(ServiceProperties serviceProperties)

    serviceProperties.Cors = new CorsProperties();
    serviceProperties.Cors.CorsRules.Add(new CorsRule()
    
        AllowedHeaders = new List<string>()  "*" ,
        AllowedMethods = CorsHttpMethods.Put | CorsHttpMethods.Get | CorsHttpMethods.Head | CorsHttpMethods.Post,
        AllowedOrigins = new List<string>()  "*" ,
        ExposedHeaders = new List<string>()  "*" ,
        MaxAgeInSeconds = 1800 // 30 minutes
     );

如果您正在寻找执行相同操作的工具，一些存储资源管理器支持配置 CORS - Azure 存储资源管理器、Cerebrata Azure Management Studio、Cloud Portam（披露 - 我正在构建 Cloud Portam 实用程序）。

正确配置 CORS 后，您可以使用 Rory 的回答中提到的代码从 blob 存储下载文件。正如 Rory 所说，您不必在客户端做任何特别的事情。

【讨论】：

非常感谢。我会寻找工具。刚试过 AzureStorageExplorer。它不能将 * 设置为 AllowedOrgin 字段。很奇怪！尝试其他工具... 这么重要的事情不能通过传送门完成，是不是很奇怪？ 有用的响应，但是否可以在每个容器的基础上启用 CORS？ @MarkShapiro 否。请在此处查看我的答案，原因是：***.com/questions/36543488/…。 终于可以在 UI 中使用了，下面看我的回答***.com/a/41351674/1671558【参考方案5】：

幸运的是，现在可以直接在门户中执行此操作。如果您只选择帐户，您将看到包含各种选项的菜单，CORS 将是 Blob、File 等每个服务的其中之一。

【讨论】：

请注意，Maximum age 属性过期后，Azure 会将此设置重置为默认值。 我有同样的问题，但添加它不允许我使用 get-command，它仍然告诉我：无法加载xxx.jpg：没有“Access-Control-Allow-Origin”标头存在于请求的资源上。因此不允许访问 Origin 'localhost:4650'。 我无法保存此规则。当我在门户中的存储帐户上尝试此操作时出现以下错误：“无法为 1 个服务中的 1 个保存 CORS 规则服务器无法对请求进行身份验证。确保 Authorization 标头的值正确形成，包括签名。 "【参考方案6】：

通过 PowerShell 设置 CORS 的更简洁的方法： https://gist.github.com/irwinwilliams/4cf93b6e2461c753ff125590650186ae

#works with Azure in Powershell v 1.3.2
clear 
$StorageAccountName = "[storageaccountname]"
$Key = "[storageaccountkey]"
$Context = New-AzureStorageContext -StorageAccountKey $Key -StorageAccountName $StorageAccountName
$CorsRules = (@
    AllowedHeaders=@("*");
    AllowedOrigins=@("*");
    ExposedHeaders=@("content-length");
    MaxAgeInSeconds=200;
    AllowedMethods=@("Get","Connect", "Head"))
Set-AzureStorageCORSRule -ServiceType Blob -CorsRules $CorsRules -Context $Context
$CORSrule = Get-AzureStorageCORSRule -ServiceType Blob -Context $Context
echo "Current CORS rules: "
echo $CORSrule

【讨论】：

终于可以在 UI 中使用了，下面看我的回答***.com/a/41351674/1671558【参考方案7】：

现在您可以使用 azure power shell 轻松设置/编辑/查看 CORS 规则。在此链接上查找更多信息：

https://azure.microsoft.com/en-us/documentation/articles/storage-powershell-guide-full/

总结以下 power shell 命令将为您的 blob 设置 CORS：

    运行Add-AzureAccount 登录您的帐户 在 azure 中查看您的订阅 Get-AzureSubscription | Format-Table SubscriptionName, IsDefault, IsCurrent, CurrentStorageAccountName 设置所需订阅$SubscriptionName = 'Your subscription name' 检查你想要的 blob Get-AzureStorageBlob 现在您需要为您的 blob $ctx = New-AzureStorageContext 创建授权上下文并输入所需的参数。 您现在已准备好为您的 blob 获取或设置 CORS 规则。查看 当前的 CORS 规则Get-AzureStorageCORSRule -ServiceType Blob -Context $ctx 设置当前的 CORS 规则，例如：$CorsRules = (@ AllowedHeaders=@("*"); AllowedOrigins=@("*"); ExposedHeaders=@("content-length"); MaxAgeInSeconds=200; AllowedMethods=@("Get","Connect", "Head")) Set-AzureStorageCORSRule -ServiceType Blob -CorsRules $CorsRules -Context $ctx

【讨论】：

终于可以在 UI 中使用了，下面看我的回答***.com/a/41351674/1671558【参考方案8】：

这就是我使用控制台应用程序启用 cors 的方式，只需在 StorageCredentials 中提供您的凭据：

private static CloudStorageAccount StorageAccount;

    public static CloudBlobClient BlobClient
    
        get;
        private set;
    

    static void Main(string[] args)
    

        StorageAccount = new CloudStorageAccount(new StorageCredentials("AccountName", "AccountKey"), true);
        BlobClient = StorageAccount.CreateCloudBlobClient();

        InitializeCors(BlobClient);
    

    private static void InitializeCors(CloudBlobClient blobClient)
               
        ServiceProperties blobServiceProperties = BlobClient.GetServiceProperties();

        ConfigureCors(blobServiceProperties);

        BlobClient.SetServiceProperties(blobServiceProperties);         
    

    private static void ConfigureCors(ServiceProperties serviceProperties)
    
        serviceProperties.Cors = new CorsProperties();
        serviceProperties.Cors.CorsRules.Add(new CorsRule()
        
            AllowedHeaders = new List<string>()  "*" ,
            AllowedMethods = CorsHttpMethods.Put | CorsHttpMethods.Get | CorsHttpMethods.Head | CorsHttpMethods.Post,
            AllowedOrigins = new List<string>()  "*" ,
            ExposedHeaders = new List<string>()  "*" ,
            MaxAgeInSeconds = 1800 // 30 minutes
        );

【讨论】：

【参考方案9】：

Azure Blob 存储支持 CORS，但您需要在发出请求之前设置标头。为此，最好使用$.ajax，因为它可以让您更好地控制正在发送的信息。这是this demo 的重新设计示例：

function setHeader(xhr) 
    xhr.setRequestHeader('x-ms-version', '2013-08-15');
    xhr.setRequestHeader('MaxDataServiceVersion', '3.0');
    xhr.setRequestHeader('Accept', 'application/json;odata=nometadata');


$.ajax(
    type: 'GET',
    datatype: "json",
    url: 'http://mytest.blob.core.windows.net/forms/f001.etx',
    beforeSend: setHeader,
    success: function(data) 
        // do something with the retrieved file.
    ,
    error: function (res, status, xhr) 
        alert("can't get the data for the specified table");
    
);

【讨论】：

Azure 似乎确实支持 CORS。这是一个包含设置详细信息的演示项目：code.msdn.microsoft.com/windowsapps/… 非常感谢。我会先尝试根据 Gaurav Mantri 的 anwser 配置服务器端。

以上是关于如何在门户的 Azure BLOB 存储中设置 CORS？的主要内容，如果未能解决你的问题，请参考以下文章

Azure 门户在存储帐户中创建 Blob 容器时出错

在 Azure 门户中上传 Blob 时如何获取发件人 IP

如何删除包含租用 blob 的 Azure 存储帐户？

如何将 APNS 证书上传到 Azure 门户

将文件上传到 Azure Blob 存储时没有触发事件网格事件——为啥？

在 Azure 应用配置中设置/添加功能标志