how to fix CORS permissions when uploading file to Azure Data Lake using blockBlobClient.upload?

Question

Following the docs I have the following code for uploading a file from String that leads to a CORS error

export async function uploadBlobFromString(containerName, path, fileContentsAsString){
  try{
    // Create blob client from container client
    debugger
    let blobName = 'https://' + `${account}` + '.blob.core.windows.net/' + `${path}` + `${accountKey}`
    console.log(blobName)
    const blobServiceClient = new BlobServiceClient(blobName);
    const containerClient = blobServiceClient.getContainerClient(containerName);
    const blockBlobClient = containerClient.getBlockBlobClient(blobName);

    await blockBlobClient.upload(fileContentsAsString, fileContentsAsString.length);
    return true
  }catch(e){
    console.log(e)
    throw (e)
  }
  
}

However CORS configuration at the storage level seems ok to me:

Would much appreciate your help

Answer 1

Hi javier cohenar,

Thank you for posting your query here!

If you are trying to upload file into Azure Data Lake store, you can use @azure/storage-file-datalake package to interact with Azure Data Lake Storage.

You can find some samples for interacting with it here: https://learn.microsoft.com/en-us/azure/storage/blobs/data-lake-storage-directory-file-acl-javascript

Code sample for uploading a file from the same link.

Please let us know if you have any further queries. I’m happy to assist you further.
If you are still experiencing issues, it may be helpful to provide specific error messages.

---

Please do not forget to "Accept the answer” and “up-vote” wherever the information provided helps you, this can be beneficial to other community members.