title: No 'Access-Control-Allow-Origin' header is present on the requested resource while uploading to Azure Blob
body: <p>I've been struggling with this for about a day now.  I am testing direct to Azure Blob storage upload and getting the dreaded CORS issue. <code>"XMLHttpRequest cannot load https://tempodevelop.blob.core.windows.net/tmp/a4d8e867-f13e-343f-c6d3-a603…Ym0PlrBn%2BU/UzUs7QUhQw%3D&amp;sv=2014-02-14&amp;se=2016-10-12T17%3A59%3A26.638531. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. The response had HTTP status code 403."</code></p>
  
  <p>Things I have already tried:</p>
  
  <ol>
  <li>set the CORS to all hosts:
  <a href="https://i.stack.imgur.com/5bQ4t.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5bQ4t.png" alt="enter image description here"></a></li>
  <li>tried hosting my app locally and on heroku</li>
  <li>made sure that I could upload a file using a different tool (Azure Storage Explorer)</li>
  <li>configured my AccessPolicy to 'rwdl' and I am definitely getting an access signature (verified in unit tests).</li>
  </ol>
  
  <p>The code as a whole is available here: <a href="https://github.com/mikebz/azureupload" rel="noreferrer">https://github.com/mikebz/azureupload</a></p>
  
  <p>But the relevant parts are here, front end upload:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  
      /* 
       * not a true GUID, see here: http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
       */ 
      function guid() {
          function s4() {
              return Math.floor((1 + Math.random()) * 0x10000)
              .toString(16)
              .substring(1);
          }
          return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
              s4() + '-' + s4() + s4() + s4();
      }
  
      function startUpload() {   
          var fileName = guid();
  
          jQuery.getJSON("/formfileupload/signature/" + fileName , function(data) {
                  console.log("got a signature: " + data.bloburl);
                  uploadFile(data.bloburl, data.signature);
              })
              .fail(function(jqxhr, textStatus, error) {
                  console.log( "error: " + textStatus + " - " + error );
              })
      }
      
      function uploadFile(bloburl, signature) {        
          var xhr = new XMLHttpRequest();
          fileData = document.getElementById('fileToUpload').files[0];
          xhr.open("PUT", bloburl + "?" + signature);
          xhr.setRequestHeader('x-ms-blob-type', 'BlockBlob');
          xhr.setRequestHeader('x-ms-blob-content-type', fileData.type);
          result = xhr.send(fileData);
      }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The signature generation code in python is here:</p>
  
  <pre><code>def generate_access_signature(self, filename):
      """
      calls the Azure Web service to generate a temporary access signature.
      """
      blob_service = BlobService(
          account_name=self.account_name, 
          account_key=self.account_key
      )
  
      expire_at = datetime.utcnow()
      expire_at = expire_at + timedelta(seconds = 30)
      access_policy = AccessPolicy(permission="rwdl", expiry=expire_at.isoformat())
  
      sas_token = blob_service.generate_shared_access_signature( 
          container_name="tmp",
          blob_name = filename, 
          shared_access_policy=SharedAccessPolicy(access_policy)
      )
      return sas_token
  </code></pre>