为 azure blob 存储启用 CORS

Question

我对Azure Blob Storage完全Azure Blob Storage ，我在为CORS客户端设置CORS遇到了问题。 我正在使用这个模块。 我在我的nodejs服务器上成功生成了一个sasToken 。

我还检查了这些参考资料：设置 Blob 服务属性、 Azure 存储服务和Windows Azure 存储的跨域资源共享 (CORS) 支持：引入 CORS，但我真的发现在何处执行/放置这些代码感到困惑。

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

在 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);
        })

文件格式

    <?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 。 但是该指南说请求标头中需要 Date 或 x-ms-date ，这些标头没有出现在您的请求标头中，这导致您的预检请求被拒绝。

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

Answer 2

今天早上我遇到了同样的问题。 做了一些研究，发现不需要更改代码库。

所需的更改是在 Azure 容器级别。 如下图所示：

输入通配符或特定的通配符，这将使事情正常工作。

Answer 3

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

HEAD添加到所需的方法中