Solving CORS error with Azure CDN

There're a lot of blogs and information about CORS error on Azure CDN. Lot's of solutions had been provided but none of them works for me. After a lot of trials and errors, I have finally found the solution. It's the sequence of defining CORS rules to Azure Blog storage and also loading the static files to the blog storage. I found this link, an easy to use Azure CORS rules manager to manage my blog account without writing any code.

The make life easier for other developers who may move from other platform, here are the simple steps to setup Azure CDN without getting CORS error.

1. Create Azure Blog Storage account and a container. Remember to update this container's property to allow Public Access.
2. *Important: Before upload any other static files to the Azure Blog storage, download the Visual Studio solution package for Azure CORS Rules Manager from the link above. Set the rules according to the picture.
3. Once, the rules are defined, you can start to upload the static files to the container that you have created.
4. Create CDN on Azure portal and map to the storage that you have created on the steps above.
5. Now, you can define the customheaders and other rules for the CDN in web.config. You can find the example from the blog. 

After a few minutes/an hour depends on your rules defined in the CORS, your static files will be available and display accordingly.

Please refer to this article: Why and how we migrated babylonjs.com to Microsoft Azure for more live example on how to make use Azure's CDN and storage.