azure , web-config ,

Azure Web App - Missing MIME types

by Abhith Rajan FollowJuly 11, 2019 · 2 min read · Last Updated:
Share this

When you deploy an app to Azure app service (Web App), you may notice that the custom font isn't showing up or some specific files is getting 404 even if they exist on the right place.

This is because of the missing Mime type definitions.

Mime Types

Its definition is,

A media type (also known as a Multipurpose Internet Mail Extensions or MIME type) is a standard that indicates the nature and format of a document, file, or assortment of bytes.

And if you want to know why it is causing the 404, read this article.

Missing Mime Types

Font Files

  <mimeMap fileExtension="woff" mimeType="application/font-woff" />
  <mimeMap fileExtension="woff2" mimeType="application/font-woff" />

Json

 <mimeMap fileExtension=".json" mimeType="application/json" />

SVG

  <remove fileExtension=".svg"/>
  <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />

Sample web.config file

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension="woff"/>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
            <remove fileExtension="woff2"/>
            <mimeMap fileExtension="woff2" mimeType="application/font-woff" />
            <remove fileExtension=".json"/>
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <remove fileExtension=".svg"/>
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
         </staticContent>
    </system.webServer>
</configuration>

Curious about remove fileExtension ? MimeMap collection inherits but it won't allow duplicate entries. If a duplicate mimeMap definition is added, it will result,

IIS7 Error: cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’

So for the safe side, we are removing the global definition for that extension before changing it.

This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

Abhith Rajan

Written by Abhith Rajan FollowBuy me a coffee
Abhith Rajan is an aspiring software engineer with more than 6 years of experience and proven successful track record of delivering technology-based products and services.

Related Videos