从 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) {
});

当我尝试时，出现以下错误：

OPTIONS 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 cannot load 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. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'chrome-extension://blablabla' is therefore not allowed access. The response had HTTP status code 403.

请帮忙！我尝试了很多 CORS 选项，但 none 对我有用。我真的想让它成为一个简单的 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# 开发人员。 Azure

中有RESTapi启用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 保留为 null

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.Storage nuget。

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

GET Azure Blob using JQuery from a Chrome App

jquery

cors

google-chrome-app

azure-blob-storage