Question

我对Azure Blob Storage完全陌生，我在为角度客户端设置CORS时遇到问题。我正在使用此module。我在sasToken服务器上成功生成了nodejs。

此外，我还检查了这些引用：Set Blob Service Properties，Cross-Origin Resource Sharing (CORS) Support for the Azure Storage Services和Windows Azure Storage: Introducing CORS，但我确实觉得这些代码的放置令人困惑。

到目前为止，我所做的就是：

在AGULAR CONTROLLER中：

// this is the service that generate the sasToken from the server
getService.getSasToken(filename)
        .then(function (response) {
            // response = {
            //    sasToken : "asa7sya....",
            //    token: "the shared key",
            //    account: "the storage account name"
            // }

            function createCORSRequest(method, url) {
                var xhr = new XMLHttpRequest();
                if ("withCredentials" in xhr) {
                    xhr.open(method, url, true);
                    xhr.setRequestHeader("Content-Type","application/xml");
                    xhr.setRequestHeader("x-ms-version", "2013-08-15");
                    xhr.setRequestHeader("Authorization", response.token);
                    xhr.setRequestHeader("myaccount", response.account);
                } else if (typeof XDomainRequest != "undefined") {
                    xhr = new XDomainRequest();
                    xhr.open(method, url, true);
                    xhr.setRequestHeader("Content-Type","application/xml");
                    xhr.setRequestHeader("x-ms-version", "2013-08-15");
                    xhr.setRequestHeader("Authorization", response.token);
                    xhr.setRequestHeader("myaccount", response.account);
                } else {
                    xhr = null;
                }
                return xhr;
            }

            var xhr = createCORSRequest('PUT', 'https://foo.blob.core.windows.net?restype=service&comp=properties');
            if (!xhr) {
                throw new Error('CORS not supported');
            }else{
                // Response handlers.
                xhr.onload = function() {
                    alert('Response from CORS request to ' + xhr.responseText);
                    azureBlob.upload({
                        baseUrl: "https://foo.blob.core.windows.net/bar/"+filename,
                        sasToken: "?"+response.sasToken,
                        file: blobFile,
                        progress: function (progress) {
                            console.log("progress", progress);
                        },
                        complete: function (complete) {
                            console.log("complete", complete);
                        },
                        error: function (error) {
                            console.log("error", error);
                        },
                        // blockSize: // What do I put here?
                    })
                };

                xhr.onerror = function() {
                    alert('Woops, there was an error making the request.');
                };
                $.ajax({
                    type: "GET",
                    url: "../scripts/cors.xml", // local xml file 
                    dataType: "xml",
                    success: function(xml){
                        console.log("xml", xml);
                        xhr.send(xml);
                    }
                });

            }
        },function (error) {
            console.log(error);
        })

CORS.XML

    <?xml version="1.0" encoding="utf-8"?>
<StorageServiceProperties>
    <Logging>
        <Version>1.0</Version>
        <Delete>true</Delete>
        <Read>false</Read>
        <Write>true</Write>
        <RetentionPolicy>
            <Enabled>true</Enabled>
            <Days>7</Days>
        </RetentionPolicy>
    </Logging>
    <HourMetrics>
        <Version>1.0</Version>
        <Enabled>true</Enabled>
        <IncludeAPIs>false</IncludeAPIs>
        <RetentionPolicy>
            <Enabled>true</Enabled>
            <Days>7</Days>
        </RetentionPolicy>
    </HourMetrics>
    <MinuteMetrics>
        <Version>1.0</Version>
        <Enabled>true</Enabled>
        <IncludeAPIs>true</IncludeAPIs>
        <RetentionPolicy>
            <Enabled>true</Enabled>
            <Days>7</Days>
        </RetentionPolicy>
    </MinuteMetrics>
    <Cors>
        <CorsRule>
            <AllowedOrigins>*</AllowedOrigins>
            <AllowedMethods>GET,PUT,POST</AllowedMethods>
            <MaxAgeInSeconds>500</MaxAgeInSeconds>
            <ExposedHeaders>x-ms-meta-data*,x-ms-meta-customheader</ExposedHeaders>
            <AllowedHeaders>x-ms-meta-target*,x-ms-meta-customheader</AllowedHeaders>
        </CorsRule>
    </Cors>
    <DefaultServiceVersion>2013-08-15</DefaultServiceVersion>
</StorageServiceProperties>

以上代码基于此GUIDE

但是我仍然收到此错误：

以前有人这样做过吗？请分享你的代码人。

提前致谢。

Answer 1

我可以看到您对预检请求的回复不包含“Access-Control-Allow-origin”标题，该标题显示您的预检请求失败。这意味着你没有得到服务器端的许可。

您说您的代码基于Guide。但指南说要求日期或x-ms-date 您的预检请求被拒绝的请求标题，不会出现在您的标题中。

我的建议是在您的请求标头中添加x-ms-date，然后重试。您可以看到this article以获取有关“预检请求”和“实际请求”的详细信息。

Answer 2

我为此花了两天时间。我必须在 blob 存储 cors 设置中对原点进行硬编码。 * 不起作用。将您的客户网址放在 cors 选项中而不是 * 中，我敢打赌情况会更好。 <AllowedOrigins>*</AllowedOrigins> 在开发时更改为您的本地主机。

同时将 HEAD 添加到必需的方法中

为天蓝色blob存储启用CORS

2 个答案: