The specified blob does not exist error while uploading blob to azure storage-cors error 403

Question

403 cors error while uploading file to blob using  "@azure/storage-blob": "^12.12.0" in angular project.

Access to XMLHttpRequest at 'https://abc.blob.core.windows.net/xyz/shruti/text.zip?sp=racwdli&st=2022-06-27T20:48:45Z&se=2023-06-28T04:48:45Z&spr=https&sv=2021-06-08&sr=c&sig=hVZg%2Brf0ZsXgv3AlkjhX%2BZQlp1MmX8pfy5geSNxHjxM%3D' from origin 'http://localhost:4200' 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.

In browser:

<Error>

<Code>BlobNotFound</Code>

<Message>The specified blob does not exist. RequestId:43087cc7-001e-0013-4e7e-3cebeb000000 Time:2023-02-09T12:06:34.0197049Z</Message>

</Error>

my code:

import { Injectable } from '@angular/core';
import { BlobServiceClient, ContainerClient } from '@azure/storage-blob';

@Injectable({
  providedIn: 'root'
})
export class BlobStorageService {

  // Enter your storage account name
  account = "abc";
  // container name
  container = "xyz";
  //sasurl
  sas = "?sp=racwdli&st=2022-06-27T20:48:45Z&se=2023-06-28T04:48:45Z&spr=https&sv=2021-06-08&sr=c&sig=hVZg%2Brf0ZsXgv3AlkjhX%2BZQlp1MmX8pfy5geSNxHjxM%3D"
  // content=event.target.files[0],name=filename,user=user object with token
  public uploadImage( content: Blob, name: string, user:any, handler: () => void) {
    this.uploadBlob(content, name, user, this.containerClient(this.sas), handler)
  }

    private uploadBlob(content: Blob, name: string, user: any, client: ContainerClient, handler: () => void) {
        let blockBlobClient = client.getBlockBlobClient(name);

        const uploadOptions = {
            blobHTTPHeaders: { blobContentType: content.type },
            metadata: { 'Access-Control-Allow-Origin': '*', Authorization: "Bearer " + user.token }
        };

        blockBlobClient.uploadBrowserData(content,uploadOptions)
            .then((res: any) => {
                console.log(res); 
                handler()
            })
    }


  private containerClient(sas: string): ContainerClient {
    return new BlobServiceClient(`https://${this.account}.blob.core.windows.net?${sas}`).getContainerClient(this.container);
  }
}

Answer 1

@Shruti Devurkar Thanks for reaching out to Microsoft Q&A.

This error message is indicating that the browser is blocked by CORS policy. CORS (Cross-Origin Resource Sharing) is a security feature that blocks web pages from making requests to a different domain than the one that served the web page. In this case, the browser is trying to access the blob storage at 'https://abc.blob.core.windows.net/xyz/shruti/text.zip' from the origin 'http://localhost:4200' and it is being blocked by the CORS policy.

To fix this issue, you need to configure CORS access for your storage account. You can do this by navigating to the Settings section of your storage account in the Azure portal and selecting CORS. Here, you can define a new CORS rule that allows access from the origin 'http://localhost:4200'. You can also create a fully-open CORS rule by setting the value of 'ALLOWED ORIGINS' to '*' which allows all domains access to the storage account.

Please note that the CORS settings described here are appropriate for a quickstart as it defines a lenient security policy. These settings, however, are not recommended for a real-world context. Ensure any settings you use in production expose the minimum amount of access necessary to your storage account to maintain secure access.

Hope this helps. Please let me know if this work for you or if you still have further issues. Thank you!