从 Chrome 应用程序中使用 JQuery 获取 Azure Blob

Question

我正在尝试使用以下 jquery 代码从我正在开发的 Chrome 应用程序向我的 Azure 存储上的 blob 执行一个简单的 GET 请求：

$.ajax({
        headers: {
            'x-ms-range': 'bytes=' + from + '-' + to,
            'x-ms-version': version,
            'x-ms-client-request-id': guid()
        },
        url: 'https://storage-name.blob.core.windows.net/container-id/blob-id?sv=2015-07-08&sr=b&sig=signature&st=2016-08-24T08%3A58%3A30Z&se=2016-08-24T09%3A28%3A30Z&sp=rl&api-version=2015-07-08&',
        type: "GET",
    }).done(function (data) {
    }).fail(function (error) {
});

当我尝试时，我收到以下错误：

选项https://storage-name.blob.core.windows.net/container-id/blob-id?sv=2015-07-08&sr=b&sig=signature&st=2016-08-24T08%3A58%3A30Z&se=2016-08-24T09%3A28%3A30Z&sp=rl

XMLHttpRequest 无法加载 https://storage-name.blob.core.windows.net/container-id/blob-id?sv=2015-07-08&sr=b&sig=signature&st=2016-08-24T08%3A58%3A30Z&se=2016-08-24T09%3A28%3A30Z&sp=rl。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'chrome-extension://blablabla'。响应的 HTTP 状态代码为 403。

请帮忙！我尝试了很多 CORS 选项，但没有一个对我有用。 我真的想保留一个简单的 ajax 请求，并避免为该请求使用自定义库。

谢谢！

更新

我通过以下代码尝试了enabling CORS：

$.ajax({
        url: 'https://docbetaeustorage.blob.core.windows.net/?restype=service&comp=properties',
        headers: {
          'Content-Type': 'application/xml',
          'x-ms-date': new Date(),
          'x-ms-version': '2013-08-15',
          'Authorization': 'SharedKey'
        },
        type: "PUT",
        data: '<?xml version="1.0" encoding="utf-8"?><StorageServiceProperties><Cors><CorsRule><AllowedOrigins>' + THIS_URL + '</AllowedOrigins><AllowedMethods>GET,PUT</AllowedMethods><MaxAgeInSeconds>500</MaxAgeInSeconds><ExposedHeaders>x-ms-*</ExposedHeaders><AllowedHeaders>x-ms-*</AllowedHeaders></CorsRule></Cors></StorageServiceProperties>'
    }).done(function (data) {
    }).fail(function (error) {
});

现在我收到此请求的预检错误...

Answer 1

您不必为此使用任何自定义库。您只需要在 Blob 存储中启用 CORS。

您可以在此处找到详细信息： https://blogs.msdn.microsoft.com/windowsazurestorage/2014/02/03/windows-azure-storage-introducing-cors/

以下代码仅适用于 C# 开发人员。有 REST api 可以在 azure 中启用 CORS

这就是我通过 Blob 帐户中的 C# 代码启用 CORS 的方式：

public void EnableCors(CloudStorageAccount storageAccount, CorsRequest corsRequest, IRequestOptions requestOptions=null, OperationContext operationContext = null)
        {
            var serviceTypeClient = storageAccount.CreateCloudBlobClient();

            ServiceProperties serviceProperties = new ServiceProperties();

            // Nullifying un-needed properties so that we don't 
            // override the existing ones 
            serviceProperties.HourMetrics = null;
            serviceProperties.MinuteMetrics = null;
            serviceProperties.Logging = null;


            serviceProperties.Cors.CorsRules.Add(new CorsRule()
            {
                AllowedHeaders = corsRequest.AllowedHeaders,
                ExposedHeaders = corsRequest.ExposedHeaders,
                AllowedMethods = corsRequest.AllowedMethods,
                AllowedOrigins = corsRequest.AllowedOrigins,
                MaxAgeInSeconds = corsRequest.PreFlightRequestAgeInMins * 60,
            });
            serviceTypeClient.SetServiceProperties(serviceProperties, requestOptions as BlobRequestOptions, operationContext);
        }

其中 storageAccount - 您的存储帐户

corsRequest - 只是我从配置文件中读取的所需值

我将 requestOptions 和 operationContext 保持为空

Answer 2

嗯，我搞定了……我不知道 CORS 设置是一次性的。

我从 azure 门户获取了存储帐户的连接密钥：

我刚刚在 C# 中运行了以下代码：

namespace EnableCorsInAzure
{
    class Program
    {
        static void Main(string[] args)
        {
            var connString = "--MY-CONNECTION-STRING-FROM-AZURE-PORTAL--";
            var storageAccount = CloudStorageAccount.Parse(connString);
            var blobClient = storageAccount.CreateCloudBlobClient();
            ServiceProperties serviceProperties = blobClient.GetServiceProperties();
            serviceProperties.Cors = new CorsProperties();
            serviceProperties.Cors.CorsRules.Add(new CorsRule()
            {
                AllowedHeaders = new List<string>() { "*" },
                ExposedHeaders = new List<string>() { "*" },
                AllowedMethods = CorsHttpMethods.Post | CorsHttpMethods.Put | CorsHttpMethods.Get | CorsHttpMethods.Delete,
                AllowedOrigins = new List<string>() { "*" },
                MaxAgeInSeconds = 3600,
            });
            blobClient.SetServiceProperties(serviceProperties);
        }
    }
}

同时包括WindowsAzure.Storagenuget。