How to fix Server failed to authenticate the request. Please refer to the information in the www-authenticate header

I am currently working on uploading the screenshot of React UI to the Azure blob storage.

But I have some issues when I upload the screenshot image.

Here is my part of codebase.

./src/captureError.js
export const getCapturedImageBlob = async (container) => {
    const screenshot = await html2canvas(container);
    return screenshot;
}

export const uploadImageToBlobStorage = (screenshot, connection_string, container_name, blob_name) => {
    screenshot.toBlob(blob => {
        console.log(blob);
        const blobServiceClient = new BlobServiceClient(connection_string);
        const containerClient = blobServiceClient.getContainerClient(container_name);
        const blobClient = containerClient.getBlockBlobClient(blob_name);

        blobClient.uploadData(blob);
    })
}

./src/App.js
const screenshot = await getCapturedImageBlob(document.querySelector("#root"));
    uploadImageToBlobStorage(screenshot, 'https://{Account Name}.blob.core.windows.net', {Container Name}, {Blob name});

Once I tried to upload the screenshot, I got this error.

PUT https://{Account Name}.blob.core.windows.net/{Container Name}/{Blob Name}?{Account Key} 401 (Server failed to authenticate the request. Please refer to the information in the www-authenticate header.)

Thanks for the error screenshot. Looking at the error details, it seems like you are uploading the blob using an incorrect request URL.

PUT https://{Account Name}.blob.core.windows.net/{Container Name}/{Blob Name}?{Account Key}

The above syntax is incorrect. Account Key shouldn't be passed as a query string. If you are using the SAS token to upload your blob, the syntax is as shown below:

More Information about the SAS token is here. Please refer the sample code provided here and here.

The Azure Storage allows only authorized PUT (Upload)operations.

The supported authorizations in Azure storage are mentioned below:

1. Shared Key (storage account key)
2. Shared access signature (SAS) token.
3. Azure Active Directory (Azure AD)

If you don't want to use the SAS token, You need to use AAD RBAC permissions or use SharedKey to access the storage while performing the PUT operation.

Sample code is here.