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

Question

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

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

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

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

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

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

而且，我是否也应该在客户端为 CORS 做些什么？

Answer 1

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

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");
    }
});

Answer 2

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

How can I configure CORS in Azure BLOB Storage in Portal?

如果需要，您始终可以通过编程方式为 blob 存储设置 CORS 规则。如果您使用的是 .Net 存储客户端库，请查看来自存储团队的博客 post：http://blogs.msdn.com/b/windowsazurestorage/archive/2014/02/03/windows-azure-storage-introducing-cors.aspx。从该博客设置 CORS 设置的代码 post:

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 提到的那样在客户端做任何特殊的事情。

Answer 3

这就是我使用控制台应用程序启用 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
        });
    }

Answer 4

现在您可以轻松 set/edit/view 使用 azure power shell 的 CORS 规则。查找有关此 link 的更多信息：

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

总结以下强大的 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

Answer 5

一种通过 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

Answer 6

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

Answer 7

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

确保您的内容HTML5合规且可访问
确保您的内容服务器已启用 CORS。 Link:
（非常重要）通过 HTTPS 提供内容。
（可选）对所有链接和 CSS 内容使用绝对 URL，例如 https://yourdomain/content。

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

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

Answer 8

如果您想访问 blob 存储 JSON 文件作为 rest API，那么您应该从存储帐户启用 CORS。进入 存储帐户 > CORS > Blob 服务 > 然后设置所有必需的值。

Answer 9

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

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

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

How can I set CORS in Azure BLOB Storage in Portal?

jquery

ajax

azure

cors