Setting Cors For Blob Storage Via Resource Sharing Not Working - "Blocked By Cors Policy"

user_15607291 0
Viewed 1299

Attempting to run an axios call to get a file results in the following error in console:

"Access to XMLHttpRequest at 'Request Url' from origin 'Origin Url' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

Blob Service Resource Sharing (Cors) Settings

As seen above, I have set Allowed origin, Allowed headers, and Exposed headers to *. I have also set Allowed methods to GET and Max age to 200 (seconds).

I've setup a .Net Core project which is handling the requests, using Postman I have verified the request is functional. However in my React project due to CORs it is not. Here Are The 2 Requests:

React Request: (Returns Cors Error)

React Request

Postman Request: (Successful - 200 Response)

Postman Request

I understand that using * is horrible for security purposes, and I intend to change it once I can confirm basic functionality for the feature I'm trying to implement. That being said how can I setup Azure Blob Storage Cors so I can make axios calls from React to get file data?

azure-blob-storage cors azure
1 Answers

You can set CORS rules individually for each of the Azure Storage services, by calling Set Blob Service Properties, Set File Service Properties, Set Queue Service Properties, and Set Table Service Properties. Once you set the CORS rules for the service, then a properly authorized request made against the service from a different domain will be evaluated to determine whether it is allowed according to the rules you have specified.

The Set Blob Service Properties operation sets properties for a storage account’s Blob service endpoint, including properties for Storage Analytics, CORS (Cross-Origin Resource Sharing) rules and soft delete settings.

Note: CORS is supported for all storage account types except for general-purpose v1 or v2 storage accounts in the premium performance tier.

CORS rules are set at the service level, so you need to enable or disable CORS for each service (Blob, File, Queue and Table) separately. By default, CORS is disabled for each service. To enable CORS, you need to set the appropriate service properties using version 2013-08-15 or later for the Blob, Queue, and Table services, or version 2015-02-21 or for the File service.

This is Example of a single CORS rule, specified via a Set Service Properties operation:

<Cors>
    <CorsRule>  
        <AllowedOrigins>http://www.contoso.com, http://www.fabrikam.com</AllowedOrigins>  
        <AllowedMethods>PUT,GET</AllowedMethods>  
        <AllowedHeaders>x-ms-meta-data*,x-ms-meta-target*,x-ms-meta-abc</AllowedHeaders>  
        <ExposedHeaders>x-ms-meta-*</ExposedHeaders>  
        <MaxAgeInSeconds>200</MaxAgeInSeconds>  
    </CorsRule>  
<Cors>

For more details refer this Document

user_159702330
Related