SharePoint Hosted App: MIME Type Mismatch Issue

Recently when working on a SharePoint hosted app, I encountered an issue where the App page was not loading correctly. The SharePoint hosted app was hosted on a site collection under the managed path "/sites" as in the following:

 

http://host-header.com/sites/my_site_coll

 

The reason I said the site collection URL is because the issue is specifically related to this.

 

This SP hosted app was a custom ribbon action made available on custom lists and on click of this action, the app page was being displayed in a dialog box. I observed that the UI of the app page was broken and it was apparent that some JavaScript/CSS references were missing.

 

The following was the error in the IE developer toolbar console:

 

The SharePoint JavaScript files SP.runtime.JS and init.js were failing to load with the error "MIME type mismatch". Using the "Network" tab in the IE developer toolbar, I captured the page load network trace.

 

Shoot up the Network toolbar, click Start capturing and Trigger the app from ribbon. Then, let the page load and click "Stop capturing".


 

Observe the type of sp.runtime.js. It was returned as "text/html".  My first guess was to check the MIME type values in the IIS website of the SharePoint web application. However, the type configured for JS files was "application/javascript". Also, the type returned for my custom JS files was "application/javascript", so only the JS files from "_layouts" failing to load properly!

 

The same app was working perfectly in another web application! Notice the URL from where the JS is loaded:

 

http://apprefix-ID.domain.com/_layouts/15/sp.runtime.js 

 

I tried to hit this URL in the browser. For the web application where the app was working, I got a prompt to save the file. For the web application where the app was not working, I did not get any response. So the path from where the JS was being loaded was incorrect or did not exist.

 

The issue was that the web application, where app was not working, did not have a site collection at the "/"  managed path. Creating this root site collection at the "/" path resolved the issue.

 

I hope this helps.