Azure Blob Storage No Access-Control-Allow-Origin header is present on the requested resource error

1
votes

Ive been having problem with uploading on Azure Blob Storage. Im able to generate SAS Token but when I do request an upload, it returns an error saying:

XMLHttpRequest cannot load 
https://mycureresources.blob.core.windows.net/resources/test.jpeg?st=2016-0…BZj6%2FKcVWRvoLXkKfa109EV6%2FYuwmTs%3D&comp=block&blockid=YmxvY2stMDAwMDAw. 
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' 
header is present on the requested resource. Origin 'http://czar.opie.com:3210' is therefore not allowed access.
The response had HTTP status code 403.
1
javascriptazureblobstorage
Have you enabled CORS on your blob storage account? You may find this blog post useful: gauravmantri.com/2013/12/01/…. – Gaurav Mantri
@GauravMantri could it be that there's a problem in my UTC format or is azure sensitive to time formats? I have a colleage with a mobile version of the app that can connect to the azure blob storage and he suggested that it could me on how I format my UTC time. e.g. 2016-03-23T06:09:55Z vs 2016-03-23 06:09:55 – czartm
You need to format the date/time properly but I don't think it is the root cause of the problem. From the error message, it seems you have not set up CORS rules properly. – Gaurav Mantri
@GauravMantri this was the error when I manually put in the link from the java script log Signature did not match. String to sign used was w 2016-03-23T06:09:55Z 2016-04-22T06:09:55Z /blob/mycureresources/resources 2015-04-05 – czartm
Can you update your question with the SAS URL (please change the account name for privacy purpose) and this error? Any more details that you can share will be really helpful. – Gaurav Mantri

1 Answers

0
votes

In simple words, This is the configuration in server side code and you are requesting from the browser. Either allow the CORS request to "*" or to the specific IP that you are browsing. In fact this is a good feature of SOP(Same-Origin-Policy). Where browser will not allow requests from other origins which are not mentioned in Access-Control-Allow-Origin header.