為 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添加到所需的方法中