3

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:

enter image description here

Any suggestion?

1
  • I have added the code for the pipeline. Please accept the answer if it helps you.
    – Abhay Dhar
    Oct 2, 2019 at 16:34

2 Answers 2

3

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.

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.