空白のブロブストレージのためにCORSを有効にしてください

Question

全く新しいAzure Blob Storageに新しく、Imは角度クライアント側にCORSを設定する際に問題があります。私はこれを使用していますmodule。私はnodejsサーバにsasTokenを正常に生成しました。

Set Blob Service PropertiesCross-Origin Resource Sharing (CORS) Support for the Azure Storage ServicesWindows Azure Storage: Introducing 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); 
     }) 

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に基づいています。しかし、ガイドには、 リクエストヘッダーにDateまたはx-ms-dateが必要であることが記載されているため、プリフライト要求が拒否されました。

あなたのリクエストヘッダーにx-ms-dateを追加して、もう一度お試しください。 this articleが表示され、「プリフライトリクエスト」と「実際のリクエスト」の詳細が表示されます。