Chrome warning about static resource (css/gif/png/js)

Question

When ever the web page is loaded i am getting warning in the debugger as

Resource interpreted as stylesheet but transferred with MIME type text/plain.

I am getting the above warning when the browser requests for js, css, gif and png files.

Any idea how to resolve this warning

Answer 1

Well the error message says it all.

Your webserver sends a wrong/missing Content-Type HTTP Header.

Use HTTP Header Check and enter the url of your js/css/gif/png and check what Content-Type header the server sends (I guess none at all or text/plain).

Then fix your server to send the correct mime type along or contact your server administrator.

The correct Content-Type values should be

text/css -> for .css files

image/gif -> for .gif files

image/jpeg -> for .jpg/.jpeg files

application/javascript -> for .js files

image/png -> for .png files

Consider yourself lucky ;). Now it is just a warning in Chrome, in earlier versions of Chrome when a wrong/missing Content-Type Header was set/sent the e.g. CSS wasn't applied at all.

Answer 2

I found that Django's development webserver serves all the images/css etc with incorrect headers as well. While Jitter's response is still the best approach to solving this, fixing the server is not always an option.

I found you can just hide the warnings in Chrome and only view the ERRORS and LOGS if you ctrl + click the two headers (ERRORS & LOGS) in the Chrome Inspect >> Console window; essentially hiding all warnings.

A simple hack, but sure makes debugging in Django less wordy and annoying.