Angularjs 为azure blob存储启用CORS

我对Azure Blob存储是全新的

。我正在用这个。我在我的
nodejs
服务器上成功生成了
sasToken

我还检查了这些参考资料：，但我真的发现把这些代码放在哪里很混乱

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

在AGULAR控制器中：

// 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>


1
真的
假的
真的
真的
7.
1
真的
假的
真的
7.
1
真的
真的
真的
7.

但是，我仍然会遇到以下错误：


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

提前感谢。
我可以看到您对飞行前请求的响应没有包含“访问控制允许原点”标题，该标题显示您的飞行前请求失败。这意味着您没有从服务器端获得权限

你说过你的代码是基于。但该指南说，日期或x-ms-Date是必需的
请求标题未出现在您的中，导致您的飞行前请求被拒绝

我的建议是将x-ms-date添加到您的请求标题中，然后重试。
您可以查看以获取有关“飞行前请求”和“实际请求”的详细信息。
仅供参考，CORS强制在所有跨源请求之前对进行飞行前HTTP选项请求，因此您需要将选项设置为允许的方法。
@Christof Reliasson I添加了选项，仍然相同。嗨，Alex感谢您的回复，我发现了这一点，并进行了更改，稍后我将更新我的问题。：）