CORS Error while downloading the fonts from the Azure CDN using Sitecore PaaS

Question

We have configured the Azure CDN for Sitecore Web Apps website, everything is working fine except the Fonts rendering from CDN, and we are getting below error:

Any suggestion?

Answer 1

To resolve the CORS CDN error , You would need to create a pipeline which adds the below request headers.This pipeline was written for Cloudfront on Amazon AWS instance , but the underlying logic is to add the Access-Control-Allow-Origin headers to Sitecore requests.

public class CDNResponseHeaders : HttpRequestProcessor
    {
        public override void Process(HttpRequestArgs args)
        {
            try
            {
                this.Execute(args.HttpContext.Response, args.HttpContext.Request);
            }
            catch (Exception e)
            {
                CustomLogger.LogError("An error occured processing the response headers.", e);
            }
        }

        public void Execute(HttpResponseBase response, HttpRequestBase request)
        {
            var dbContext = Sitecore.Context.Database;
            if (dbContext != null)
            {
                var configItem = dbContext.GetItem(Constants.CdnConfigurationMap);               
                var corsList = new List<string>();                
                if (configItem != null)
                {
                    if (!String.IsNullOrEmpty(configItem.Fields["Data"].Value))
                    {
                        corsList = JsonConvert.DeserializeObject<List<string>>(configItem.Fields["Data"].Value);
                        if (corsList != null)
                        {
                            var clientOrigin = request.Headers.GetValues("Origin") ?? request.Headers.GetValues("origin");
                            if (clientOrigin != null)
                            {
                                string origin = clientOrigin[0];
                                CustomLogger.Info("Print Origin Value " + origin);

                                int myIndex = corsList.IndexOf(origin);
                                if (myIndex != -1)
                                {
                                    CustomLogger.Info("Request Origin Found add the CORS Header..." + clientOrigin);                                    
                                    //response.Headers.Add("Access-Control-Allow-Origin", origin);
                                    response.Headers.Add("Access-Control-Allow-Methods", "API, CRUNCHIFYGET, GET, POST, PUT, UPDATE, OPTIONS");
                                    response.Headers.Add("Access-Control-Allow-Headers", "Content-Type, Origin, accept, app_key, authorization");
                                    response.Headers.Add("Access-Control-Max-Age", "86400");
                                }
                                else
                                {
                                    CustomLogger.Info("Request Origin Unknown unable to add the CORS Header...");
                                }
                            }
                        }
                    }
                }
            }
        }
    }

We also created a Sitecore Item which stores the domain names as Key/Value pairs for the whitelisting.

Answer 2

You can add the following rewrite rule to your web.config to add the required header on font files. The benefit of this is that you don't need any extra code - IIS rewrite module is available by default on Azure WebApps.

<system.webServer>
    <rewrite>
      <outboundRules>
        <rule name="Enable CORS for Fonts">
          <match serverVariable="RESPONSE_Access_Control_Allow_Origin" pattern=".*" />
          <conditions>
            <add input="{REQUEST_URI}" pattern="^[^\?]+\.(ttf|otf|eot|woff|woff2|svg)(\?.*)?$" />
          </conditions>
          <action type="Rewrite" value="*" />
        </rule>
      </outboundRules>
    </rewrite>
</system.webServer>