2016-04-04 17 views
2

Im total neu zu Azure Blob Storage und ich habe ein Problem bei der Einrichtung der CORS für die eckige Client-Seite. Ich verwende dieses module. Ich habe erfolgreich einen sasToken auf meinem nodejs Server generiert.Aktivieren Sie CORS für Azure Blob Speicher

Auch ich habe diese Referenzen überprüft: Set Blob Service Properties, Cross-Origin Resource Sharing (CORS) Support for the Azure Storage Services und Windows Azure Storage: Introducing CORS aber ich finde es wirklich verwirrend, wo diese Codes zu tun/setzen.

Bisher was ich getan habe, ist dies:

IM Agular REGLER:

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

Die obigen Codes basiert auf dies GUIDE

Allerdings bekomme ich diesen Fehler:

enter image description here

jemand zuvor getan hat? Bitte teilen Sie Ihren Code Jungs.

Vielen Dank im Voraus.

+1

Nur als FYI, zwingt CORS eine HTTP-OPTIONS-Anforderung vor dem Flug für vor allen Quer Herkunft Anfragen gemacht werden, so müssen Sie auch OPTIONS als zulässiges Verfahren einzustellen ' GET, PUT, POST, OPTIONEN 'Es gibt einen Abschnitt über Pre-Flight-OPTIONS Anfrage im [MDN Artikel über CORS] (https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). –

+0

@ChristoferEliasson Ich fügte OPTIONEN hinzu, immer noch das Gleiche. – CENT1PEDE

Antwort

1

kann ich sehen, dass Ihre Antwort auf Preflight-Anfrage nicht ‚Access-Control-Allow-Origin‘ Header enthält, die fehlgeschlagen Ihre Preflight-Anfrage zeigt. Es bedeutet, dass Sie keine Erlaubnis von der Serverseite erhalten haben.

Sie haben gesagt, dass Ihr Code auf Guide basiert. Aber der Guide sagt Datum oder X-Ms-Datum ist in Anfrage Header benötigt, die nicht in Ihrem erscheint, die Ihre Preflight-Anfrage abgelehnt hat.

Mein Vorschlag ist das Hinzufügen von X-Ms-Datum zu Ihrer Anfrage Kopfzeilen und versuchen Sie es erneut. Sie können this article sehen, um Details über 'Preflight-Anfrage' und 'tatsächliche Anfrage' zu erhalten.

+0

Hallo Alex Dank für die Antwort, dachte ich, dass aus und ich Änderungen, werde ich später meine Frage aktualisieren. :) – CENT1PEDE

Verwandte Themen