Azure Storage Blob CORS errors

Question

I have an Azure Storage Account (classic) and I enabled CORS through the portal in this way:

Now I have a Flutter Web App (PWA) that needs to get some images from this storage, but it gets CORS errors.

I also tried with a test web page with a simple jquery ajax call and I gets the same errors. This is the jquery code:

$.ajax({
        url: 'https://xxxx.blob.core.windows.net/test.jpg',
        type: 'get',
        success: function(data, status) {
            console.log("Status: "+status+"\nData: "+data);
        },
        error: function (result) {
            console.log(result);
        }           
     });

The error message is:

Access to XMLHttpRequest at 'https://xxxx.blob.core.windows.net/test.jpg' from origin 'https://zzz.azurewebsites.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

How can I add the Response Header: access-control-allow-origin: *

Thanks.

Please try to add "OPTIONS" as well for the Allowed methods. — Ivan Yang
Can you edit your question and include the exact error message you're getting. — Gaurav Mantri
I tried to add "OPTIONS" for the allowed methods. It doesn't works. I added the error message to the question. Thanks. — user3607621
Your CORS configuration looks ok. Can you check the HTTP status code of the error? I’ve seen AJAX requests failing with other status codes but showing this CORS error. — Gaurav Mantri

Gaurav Mantri Gaurav Mantri · Accepted Answer · 2021-04-14T10:13:54

As discussed in the chat, your CORS configuration is perfectly fine. The issue you are running into is because the browser had cached the CORS settings. Two things we discovered:

CORS settings max age was set at a very high value (86400 seconds) that would have made the browser cache the CORS settings for a longer duration. Deleting the CORS settings and recreating it with lower max age value along with deleting browser cache will fix that.
It is always helpful to try the AJAX request in a 2nd browser just in case the 1st browser has cached the CORS settings.

Azure Storage Blob CORS errors

1 Answers