CORS Error downloading fonts from the Azure CDN

One of the advantages of locating static files on Azure Storage is the improvement in the performance of the web site, since it becomes one source more in order to download resources by the browser (by default, a web browser is able to download approximately 6 resources in parallel per domain). However, a code such as the following can cause an error because of CORS (Cross-Origin Resource Sharing):

/* latin */@font-face {
  font-family: 'Shadows Into Light';
  font-style: normal;
  font-weight: 400;
  src: local('Shadows Into Light'), local('ShadowsIntoLight'), url(https://returngisstorage.blob.core.windows.net/fonts/Shadows.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

body{
    font-family:'Shadows Into Light';
}
Azure Storage and CORS error - fonts
Azure Storage and CORS error – fonts

To enable CORS in your Azure Storage account, you can follow the steps that I told you in this other post.

Azure Storage - CORS enabled - fonts OK
Azure Storage – CORS enabled – fonts OK

However, I’ve realized that I get the same error when I use Azure CDN, even if CORS is enabled in my Azure Storage account related.

/* latin */@font-face {
    font-family: 'Shadows Into Light';
    font-style: normal;
    font-weight: 400;
    /*  src: local('Shadows Into Light'), local('ShadowsIntoLight'), url(https://returngisstorage.blob.core.windows.net/fonts/Shadows.woff2) format('woff2');*/    src: local('Shadows Into Light'), local('ShadowsIntoLight'), url(http://az782010.vo.msecnd.net/fonts/Shadows.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

body {
    font-family: 'Shadows Into Light';
}
Azure Storage - CORS enabled and CDN- fonts wrong
Azure Storage – CORS enabled and CDN shows CORS error

What I have been able to detect, waiting to be confirmed, is that Azure CDN is unable to retrieve resources from an account of Azure Storage where CORS has limited access to one or more specific domains. The following code shows how to add a CORS rule allowing access from the CDN:

using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Shared.Protocol;
using System;
using System.Collections.Generic;
using System.Configuration;

namespace CORS
{
    class Program
    {
        static void Main(string[] args)
        {
            var account = CloudStorageAccount.Parse(ConfigurationManager.ConnectionStrings["StorageAccount"].ConnectionString);

            var blobClient = account.CreateCloudBlobClient();

            ServiceProperties blobServiceProperties = blobClient.GetServiceProperties();

            blobServiceProperties.Cors = new CorsProperties();

            blobServiceProperties.Cors.CorsRules.Add(new CorsRule()
            {
                AllowedHeaders = new List<string>() { "*" },
                AllowedMethods = CorsHttpMethods.Get | CorsHttpMethods.Head,
                AllowedOrigins = new List<string>() { "*" },
                ExposedHeaders = new List<string>() { "*" },
                MaxAgeInSeconds = 3600
            });

            blobClient.SetServiceProperties(blobServiceProperties);

            Console.WriteLine("Done!");

            Console.ReadLine();

        }
    }
}

It is important to remember that Azure CDN maintains resources cached for 7 days, so you should keep that in mind when performing tests (the easiest way is uploading new resources in order to perform your tests).

Cheers!