Why my frontend app get cors error while trying to download a blob with generated sas token?

Question

Hello, i have a Node.js app and a blob container that is private.To get blobs i give to my client sas tokens that i am generating in this mode

    const sasOptions: BlobSASSignatureValues = {
      blobName,
      containerName: BlobContainerNamesEnum.UPLOADS,
      permissions: BlobSASPermissions.parse('r'),
      protocol: SASProtocol.Https,
      startsOn: startTime,
      expiresOn: expirationTime,
    };

    const sasToken = generateBlobSASQueryParameters(
      sasOptions,
      userDelegationKey,
      this.storageAccountConfig.name,
    ).toString();

My frontend want to implement https://www.npmjs.com/package/react-audio-visualize and for this needs to make fetch for blob instead of src (that worked fine) prop but get this error:

from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Answer 1

Hello Vasile

When utilizing a blob URL (even with a SAS token) directly within an HTML src attribute (such as for <img>, <video>), the browser frequently executes a "simple request" and does not consistently issue a CORS preflight OPTIONS request.

It may directly retrieve the resource. If the resource successfully loads (which it does, given that your SAS token is valid), the browser generally permits it to be displayed or played, even in the absence of an explicit CORS header, provided that the resource is not subsequently accessed.

As Showen in the error message from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. indicates that your Azure Storage account, where the blobs are stored, is not configured to allow requests from your frontend's domain.

CORS Configuration:

• In the search bar at the top, type the name of your Storage Account and select it. In the left-hand menu of your storage account, under the "Data storage" section, select "Browser" (for Blob service) or "Resource sharing (CORS)". The "Resource sharing (CORS)" blade is where you manage CORS rules for all storage services (Blob, File, Queue, Table).
• Since your issue is with blobs, click on "Blob service" under the "Services" tab, then select "CORS". You will see a section titled "CORS rules". Click on "Add rule" (or if there are existing rules, you can edit one or add a new one).

Post which you will need to establish a rule that permits the origin of your frontend to access the blobs. During development or testing phases, you may opt for a more lenient rule at first; however, for production environments, it is advisable to adopt the most restrictive approach possible.

• Enter the exact domain(s) from which your frontend application is served.
• http://localhost:<port> (e.g., http://localhost:3000)
• Select the HTTP methods your frontend will use to interact with the blobs. For fetching, you definitely need GET. If you also upload, you might need PUT, POST, etc. Select GET and OPTIONS at a minimum. For general access, you can use * to allow all headers (less secure).
• For stricter control, you might need to specify headers that your frontend sends (e.g., x-ms-blob-type, Content-Type). If react-audio-visualize sends custom headers, you'll need to list them here. A common safe default for fetch is Content-Type,Accept.
• Click "Save" at the top of the CORS settings blade.

After saving, it might take a few minutes (up to 5-10 minutes) for the CORS rule to propagate across Azure Storage.

References: https://learn.microsoft.com/en-us/rest/api/storageservices/cross-origin-resource-sharing--cors--support-for-the-azure-storage-services

Hope the above answer helps! Please let us know do you have any further queries.

---

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. 

 

Answer 2

Hi Vasile

By default, CORS is not enabled for Azure Blob Storage, which restricts cross-origin requests from being made.

You can follow this MS Document to understand CORS policy.

To enable CORS in Azure blob storage:

Portal -> Your storage account -> Under setting(Resource sharing CORS) -> blobs service.

Allowed origins = *
Allowed methods = GET, HEAD, MERGE, DELETE, POST, PUT, OPTIONS, PATCH (For your environments it is better to add only the required methods)
Allowed headers= *
Exposed headers= *
Max age = 86400

After adding you can save the CORS policy.

Once your Cors policy is set, you can try with the same code to get the blobs of the container.

Hope this answer helps! please let us know if you have any further queries. I’m happy to assist you further.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.