Azure Web App — Azure CDN — WordPress — CORS

Azure CDN with Azure Web App — Access to Font at CDN has been Blocked by CORS Policy

I was using Azure CDN to serve all my files and all the files were loading fine except the fonts and icons because I was getting the CORS issue. Here is the fix.

Image for post
Image for post
Serve files

Introduction

Working with Azure web app is always fun. I was facing a CORS issue in my WordPress web application recently. Here in this post, I am going to share with you the solution that helped me. I was using Azure CDN to serve all my files and all the files were loading fine except the fonts and icons because I was getting the CORS issue. Here is the fix. Preceding is the image of my browser console, where you can see the error clearly.

Image for post
Image for post
CORS issue

Here is how my blog looked like when the icons were not loading.

Image for post
Image for post
Missing icons

Fix for “Acces to font CROS policy issue”

The first thing to do is to allow requests from all the origins, we can easily do this in Azure web application. Just login to your Azure portal, and go to your Azure web application. Click on the CORS menu under API and * as the allowed origin.

Image for post
Image for post
Allow origins in Azure web app

When you are done, just click on the Save button.

BY DEFAULT FILES WITH .WOFF2, .WOFF, AND .TTF EXTENSIONS ARE NOT SERVED BY IIS IN AZURE APP SERVICE.

Azure app service IIS config

Now we should edit our web.config file with the configuration for these files. The web.config file will be present in the root folder where your index file is. You can use windows explorer to FTP to get this file or use FTP clients such as FileZilla or use the deployment tool Kudu in the Azure portal.

Image for post
Image for post
KUDU

There should be separate configuration entries for each font file types. We will add these configurations in the system.webServer tag which is the child tag of configuration tag.

You can also do this by adding the extension called “Enable Static Web Fonts”. To add an extension, click on the Extensions menu from the left pan and then click on +Add.

Image for post
Image for post
Add extension in Azure app

Now click on the “Choose extension” option and select the “Enable Static Web Fonts” extension.

Image for post
Image for post
Enable static web fonts extension

Now accept the legal terms and click OK.

Conclusion

When you are done configuring, just visit your azure web application, you should now see that all the fonts, icons are loaded. You can always read this post on my blog here.

About the Author

I am yet another developer who is passionate about writing and video creation. I have written close to 500 blogs on my blog. And I upload videos on my YouTube channels Njan Oru Malayali and Sibeesh Passion. Please feel free to follow me.

Your turn. What do you think?

Thanks a lot for reading. Did I miss anything that you may think which is needed in this article? Could you find this post useful? Kindly do not forget to share your feedback.

Kindest Regards
Sibeesh Venu

Written by

An engineer by profession and writer by passion. Microsoft MVP, Author, Blogger. sibeeshpassion.com, youtube.com/sibeeshPassion, youtube.com/njanorumalayali

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store