Fallo en la descarga de fonts desde Azure CDN

Una de las ventajas que tiene ubicar los archivos estáticos en una cuenta de Azure Storage es la mejora en el rendimiento del sitio web, ya que se convierte en una fuente más de la que descargar los recursos por parte del navegador (por defecto, un navegador es capaz de descargar aproximadamente 6 recursos en paralelo por dominio).

Si embargo, un código como el siguiente puede provocar un error debido a 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

Para habilitar CORS en tu cuenta de Azure Storage puedes seguir los pasos que te conté en este otro post.

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

Sin embargo, me he dado cuenta de que cuando se trabaja con la CDN de Azure, puede ocurrirte este mismo error cuando la apuntamos a una cuenta de storage, aunque CORS esté habilitado.

/* 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(https://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

Lo que he podido detectar, a espera de ser confirmado, es que Azure CDN no puede recuperar recursos de una cuenta de Azure Storage donde CORS tiene limitado el acceso a uno o varios dominios específicos. El siguiente código muestra cómo añadir una regla CORS que permita el acceso desde la 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();
        }
    }
}

Es importante recordar que Azure CDN mantiene los recursos en caché por 7 días, por lo que debes tenerlo en cuenta al realizar pruebas (la forma más sencilla es subiendo nuevos recursos con los que testear).

¡Saludos!