Question

我们在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做些什么？

Answer 1

幸运的是，这可以直接在门户网站上进行。如果您只选择该帐户，您将看到带有各种选项的菜单，CORS将成为Blob，File等每项服务的其中之一。

Answer 2

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

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

如果需要，可以始终以编程方式为blob存储设置CORS规则。如果您使用的是.Net Storage Client库，请查看存储团队发布的这篇博文：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管理工作室，云端口（披露 - 我正在构建云端口实用程序）。 / p>

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

Answer 3

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

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

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

运行handlePostSubmit: function(post) { var posts = this.state.data; post.id = Date.now(); var newPosts = posts.concat([post]); this.setState({data: newPosts}); $.ajax({ url: this.props.url, dataType: 'json', type: 'POST', data: post, success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { this.setState({data: posts}); console.error(this.props.url, status, err.toString()); }.bind(this) }); }, delc: function(post){ var index = this.state.data.indexOf(post); var newData = React.addons.update(this.state.data, { $splice: [[index, 1]] }); this.setState({ data: newData }); $.ajax({ url: this.props.url, dataType: 'json', type: 'DELETE', success: function(data) { this.setState({data: data}); }.bind(this), error: function(xhr, status, err) { this.setState({data: newData}); console.error(this.props.url, status, err.toString()); }.bind(this) }); }以登录您的帐户
在azure Add-AzureAccount
设置所需订阅Get-AzureSubscription | Format-Table SubscriptionName, IsDefault, IsCurrent, CurrentStorageAccountName
检查所需的blob $SubscriptionName = 'Your subscription name'
现在您需要为blob Get-AzureStorageBlob创建授权上下文并输入所需的参数。
您现在已准备好为您的blob获取或设置CORS规则。校验当前的CORS规则$ctx = New-AzureStorageContext
设置当前的CORS规则，例如：Get-AzureStorageCORSRule -ServiceType Blob -Context $ctx
$CorsRules = (@{ AllowedHeaders=@("*"); AllowedOrigins=@("*"); ExposedHeaders=@("content-length"); MaxAgeInSeconds=200; AllowedMethods=@("Get","Connect", "Head")})

Answer 4

通过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 5

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

Answer 6

为了确保您的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

Answer 7

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

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

Answer 8

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

Answer 9

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

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

9 个答案: