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

Question

我正在尝试使用以下 jquery 代码从我正在开发到 Azure 存储上的 blob 的 Chrome 应用程序执行一个简单的 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 选项，但没有一个对我有用。我真的想让它保持一个简单的 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中有REST api可以启用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