title: Unable to upload to blob storage, missing Access-Control-Allow-Origin header
body: <p>Using the @azure/storage-blob module in the browser, it's not possible to upload to azure storage directly. It complains about a missing request header. The upload is done from within a ReactJS app running as an Office Add-in.</p>
  
  <p>As required by Microsoft, CORS have been enabled on storage account for blobs.</p>
  
  <p>I tried finding a way to add custom HTTP Headers however, none worked.</p>
  
  <p>Here's the upload code</p>
  
  <pre><code>import { Credential, BlobServiceClient} from "@azure/storage-blob/browser/azure-storage-blob.min.js";
  
  export function uploadToStorage(storageAccountName: string, storageAccountKey: string, file: SelectedFile) {
      return async (dispatch) =&gt; {
          try {
              const account = storageAccountName;
              const accountKey = storageAccountKey;
              const sharedKeyCredential = new Credential(account, accountKey);
              const blobServiceClient = new BlobServiceClient(
                  `https://${account}.blob.core.windows.net`,
                  sharedKeyCredential
              );
              const containerClient = blobServiceClient.getContainerClient("container-name");
              const blobClient = containerClient.getBlobClient(file.name);
              const blockBlobClient = blobClient.getBlockBlobClient();
              const uploadBlobResponse = await blockBlobClient.uploadBrowserData(file.data, {
                  maxSingleShotSize: 4 * 1024 * 1024
                }, { "blobHTTPHeaders": { "blobContentType": file.mimeType } });
          }
          catch (error) { 
              console.error(error);
          }
      }
  }
  </code></pre>
  
  <p>The error from Chrome Debugger is as follow:</p>
  
  <p>Access to XMLHttpRequest at '<a href="https://somestorageaccountsomewhere.blob.core.windows.net/blablablacontainer/Somefile-2018.5-en.docx" rel="nofollow noreferrer">https://somestorageaccountsomewhere.blob.core.windows.net/blablablacontainer/Somefile-2018.5-en.docx</a>' from origin '<a href="https://localhost:3000" rel="nofollow noreferrer">https://localhost:3000</a>' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.</p>