title: Enable CORS for azure blob storage
body: <p>Im totally new to <code>Azure Blob Storage</code> and Im having a problem in setting up the <code>CORS</code> for the angular client side. I am using this <a href="https://github.com/kinstephen/angular-azure-blob-upload" rel="nofollow noreferrer">module</a>. I successfully generated a <code>sasToken</code> on my <code>nodejs</code> server.</p>
  
  <p>Also I have checked these references : <a href="https://msdn.microsoft.com/en-us/library/azure/hh452235.aspx" rel="nofollow noreferrer">Set Blob Service Properties</a>, <a href="https://msdn.microsoft.com/en-us/library/azure/dn535601.aspx?f=255&amp;MSPPError=-2147217396" rel="nofollow noreferrer">Cross-Origin Resource Sharing (CORS) Support for the Azure Storage Services</a> and <a href="https://blogs.msdn.microsoft.com/windowsazurestorage/2014/02/03/windows-azure-storage-introducing-cors/" rel="nofollow noreferrer">Windows Azure Storage: Introducing CORS</a> but I really find it confusing where to do/put those codes.</p>
  
  <p>So far what I've done is this :</p>
  
  <p><strong>IN THE AGULAR CONTROLLER:</strong> </p>
  
  <pre><code>// 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&amp;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);
          })
  </code></pre>
  
  <p><strong>CORS.XML</strong></p>
  
  <pre><code>    &lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;StorageServiceProperties&gt;
      &lt;Logging&gt;
          &lt;Version&gt;1.0&lt;/Version&gt;
          &lt;Delete&gt;true&lt;/Delete&gt;
          &lt;Read&gt;false&lt;/Read&gt;
          &lt;Write&gt;true&lt;/Write&gt;
          &lt;RetentionPolicy&gt;
              &lt;Enabled&gt;true&lt;/Enabled&gt;
              &lt;Days&gt;7&lt;/Days&gt;
          &lt;/RetentionPolicy&gt;
      &lt;/Logging&gt;
      &lt;HourMetrics&gt;
          &lt;Version&gt;1.0&lt;/Version&gt;
          &lt;Enabled&gt;true&lt;/Enabled&gt;
          &lt;IncludeAPIs&gt;false&lt;/IncludeAPIs&gt;
          &lt;RetentionPolicy&gt;
              &lt;Enabled&gt;true&lt;/Enabled&gt;
              &lt;Days&gt;7&lt;/Days&gt;
          &lt;/RetentionPolicy&gt;
      &lt;/HourMetrics&gt;
      &lt;MinuteMetrics&gt;
          &lt;Version&gt;1.0&lt;/Version&gt;
          &lt;Enabled&gt;true&lt;/Enabled&gt;
          &lt;IncludeAPIs&gt;true&lt;/IncludeAPIs&gt;
          &lt;RetentionPolicy&gt;
              &lt;Enabled&gt;true&lt;/Enabled&gt;
              &lt;Days&gt;7&lt;/Days&gt;
          &lt;/RetentionPolicy&gt;
      &lt;/MinuteMetrics&gt;
      &lt;Cors&gt;
          &lt;CorsRule&gt;
              &lt;AllowedOrigins&gt;*&lt;/AllowedOrigins&gt;
              &lt;AllowedMethods&gt;GET,PUT,POST&lt;/AllowedMethods&gt;
              &lt;MaxAgeInSeconds&gt;500&lt;/MaxAgeInSeconds&gt;
              &lt;ExposedHeaders&gt;x-ms-meta-data*,x-ms-meta-customheader&lt;/ExposedHeaders&gt;
              &lt;AllowedHeaders&gt;x-ms-meta-target*,x-ms-meta-customheader&lt;/AllowedHeaders&gt;
          &lt;/CorsRule&gt;
      &lt;/Cors&gt;
      &lt;DefaultServiceVersion&gt;2013-08-15&lt;/DefaultServiceVersion&gt;
  &lt;/StorageServiceProperties&gt;
  </code></pre>
  
  <p>The codes above is based on this <a href="https://msdn.microsoft.com/en-us/library/azure/hh452235.aspx" rel="nofollow noreferrer">GUIDE</a></p>
  
  <p>However I am still getting this error : </p>
  
  <p><a href="https://i.stack.imgur.com/CbiiS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CbiiS.png" alt="enter image description here"></a></p>
  
  <p>Has anyone done this before? Please share your code guys. </p>
  
  <p>Thanks in advance.</p>