How to upload a file to Azure Blob storage from Angular

Question

I am getting error attached when i try to upload a file from angular. But, the same azure storage account configuration working from asp.net but not from angular. Can you please help me on this?cors error azure blob storage

I am trying to upload a file to azure blob storage from angular, the below is the code that, i implemented. I have directly added the sas token url instead of generating it to check whether file upload works or not.

below is the code

// environment file

export const environment = {
  production: false,
  accountName : "<accountname>",
  containerName:"<containername>",
   key:"<key>"
};

// added in pollyfills 
(window as any).global = window;
 (window as any).process = require( 'process' );
 (window as any).Buffer = require( 'buffer' ).Buffer

//file upload method`


async uploadFileToBlob() {
    // generate account sas token
    const accountName = environment.accountName;
    const key = environment.key;

    var str = CryptoJS.HmacSHA256(StringToSign, CryptoJS.enc.Base64.parse(key));
    var sig = CryptoJS.enc.Base64.stringify(str);


    const sasToken = `sp=rac&st=2022-11-21T15:37:13Z&se=2023-12-31T23:37:13Z&spr=https&sv=2021-06-08&sr=c&sig=rYx4JWTcGPVSceUkuxJDSXN8u1%2BbNSFh3A7dYPqw3EA%3D`;
    const containerName = environment.containerName;

    const pipeline = newPipeline(new AnonymousCredential(), {
      retryOptions: { maxTries: 4 }, // Retry options
      userAgentOptions: { userAgentPrefix: "AdvancedSample V1.0.0" }, // Customized telemetry string
      keepAliveOptions: {
        // Keep alive is enabled by default, disable keep alive by setting false
        enable: false
      }
    });

    const blobServiceClient = new BlobServiceClient(`https://${accountName}.blob.core.windows.net?${sasToken}`,
      pipeline)
    const containerClient = blobServiceClient.getContainerClient(containerName)
    if (!containerClient.exists()) {
      console.log("the container does not exit")
      await containerClient.create()

    }
    const client = containerClient.getBlockBlobClient(this.fileName.name)
    const response = await client.uploadData(this.fileName, {
      blockSize: 4 * 1024 * 1024, // 4MB block size
      concurrency: 20, // 20 concurrency
      onProgress: (ev) => console.log(ev),
      blobHTTPHeaders: { blobContentType: this.fileName.type }
    })
    console.log(response._response.status)
  }

Can you help me to resolve this issue ?