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

Dracaena

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.

Cleopatra

The mime type of .js is actually application/javascript according to the RFC. rfc-editor.org/rfc/rfc4329.txt – Husted

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.

Jackinthebox

Good to know it's only because I'm in dev mode. – Tallow

@Valchris, In production Django shouldn't be serving your static files at all, your webserver (Apache/Nginx) should be. I assume you are doing this correctly, but wanted to be clear for newbie Django people who might hit this page. – Jackinthebox

This refers to at the bottom of the console where there is a horizontal multi-select of errors, warnings, and logs. – Grosz

For me checking "Hide network messages", under the "filter" icon in the console hid the messages. – Trovillion

Answer 3

It's a problem with your server configuration. You probably have some stray .htaccess files that are playing with the MIME types.

Vannessavanni

Answer 4

I'm also running into these issues and when I use the HTTP Header Check utility for the the resources that are getting this error, a valid Content-Type header is returned with the correct mime-type for the resource requested. I also validated these headers with Firefox/Live HTTP headers, as well as wget.

I'm wondering if this is actually a bug in Chrome that is causing it to ignore this particular header for these types of files.

Homophonous

Answer 5

I had this problem after renaming a directory in my /public/ folder. Chrome's cache was trying to load the file from the old directory, which was now returning an error page instead of the image -- and thus the error stating that it was expecting a .jpg but receiving a text/html

Sophistication

Answer 6

You can hide the warning, buy adding this cose to you JS:

console.groupCollapsed(' ');console.log('just example');console.groupEnd(); console.log('b')

Wealthy

how is this supposed to resolve the issue? this is just messing with the console but it certainly won't fix the problem OP is having. – Liam