1

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

enter image description here

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.

user3607621
  • 169
  • 2
  • 8
  • Please try to add "OPTIONS" as well for the Allowed methods. – Ivan Glasenberg Apr 14 '21 at 09:15
  • 1
    Can you edit your question and include the exact error message you're getting. – Gaurav Mantri Apr 14 '21 at 09:17
  • I tried to add "OPTIONS" for the allowed methods. It doesn't works. I added the error message to the question. Thanks. – user3607621 Apr 14 '21 at 09:33
  • 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 Apr 14 '21 at 09:47
  • The HTTP status code is "CORS error". – user3607621 Apr 14 '21 at 09:49
  • Hmmm...that’s weird. Can you try by adding another CORS rule specific to your web app (origin being your web app address)? (Edit: never mind...I noticed that you already tried that). – Gaurav Mantri Apr 14 '21 at 09:52
  • I tried: I added another CORS rule with Allowed Origins https://zzz.azurewebsites.net and another with zzz.azurewebsites.net. It still doesn't works. – user3607621 Apr 14 '21 at 09:54
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/231107/discussion-between-gaurav-mantri-and-user3607621). – Gaurav Mantri Apr 14 '21 at 09:57
  • Try using HTTPS and HTTP, as with similar configuration as me, I was also getting the cors error – CredibleAshok Aug 13 '21 at 06:28
  • I needed to access images from a blob container with a public url and found I had to have GET and HEAD both checked for 'Allowed methods'. – timbari Jan 27 '23 at 07:34

1 Answers1

4

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.

Gaurav Mantri
  • 128,066
  • 12
  • 206
  • 241
  • Disabling browser cache (Chrome -> Dev Tools -> Network tab -> Disable Cache) helped with this. Indeed, I set a very high value initially and it got cached (somewhere along the way). As soon as I disabled Chrome cache it immediately worked. – Alex Sorokoletov Dec 10 '21 at 04:57
  • Could you guys help me? i have the same problem with the cors police, but even disabling cache from browser its not working in any browser that i'm trying to use blob. – ReZ Feb 10 '23 at 14:36