정적 리소스에 대한 크롬 경고 (CSS/GIF/PNG/JS)

Question

웹 페이지가로드되면 디버거에서 경고를 받고 있습니다.

리소스는 스타일 시트로 해석되었지만 Mime Type Text/Plain으로 전송되었습니다.

브라우저가 JS, CSS, GIF 및 PNG 파일을 요청하면 위의 경고를 받고 있습니다.

이 경고를 해결하는 방법을 알고 있습니다

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.

Answer 3

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

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.

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

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')