Azure 存储 Blob CORS 错误

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.

Answer 1

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:

1. 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.

2. It is always helpful to try the AJAX request in a 2nd browser just in case the 1st browser has cached the CORS settings.