Firefox下Django模板加载JS出现MIME类型警告的原因与解决

嘿，我之前也碰到过Firefox这个严格的MIME类型校验问题，别担心，咱们一步步拆解原因和解决办法：

可能的原因 #

• Django开发服务器的小缺陷：Django自带的runserver在处理某些静态文件时，偶尔会抽风，没法正确识别.js文件的MIME类型，错误返回text/plain。Chrome对这个容错性高，不会报错，但Firefox对MIME类型的校验更严格，就会抛出警告。
• 生产服务器配置遗漏：如果是上线后的生产环境，你用的Nginx、Apache这类服务器，可能没配置.js文件的MIME类型映射，导致服务器返回了错误的Content-Type头。
• 浏览器缓存搞鬼：Firefox可能缓存了之前错误的响应信息，哪怕你后来修复了配置，它还是读旧缓存，所以警告一直存在。
• 文件小意外：虽然你写的是.js后缀，但说不定文件被误命名成大写.JS（有些服务器对大小写敏感），或者文件内容不是标准的JavaScript代码——不过这种情况比较少见。

对应的解决方法 #

1. 开发环境（用Django runserver时） #

• 先试试重启服务器：有时候就是服务器加载时的临时bug，关掉python manage.py runserver再重新启动，说不定就自动修复了。
• 用Whitenoise中间件兜底：如果重启没用，推荐用whitenoise这个第三方库，它能完美处理静态文件的MIME类型。先安装：

  pip install whitenoise
  

  然后在settings.py的MIDDLEWARE列表里，把'whitenoise.middleware.WhiteNoiseMiddleware'加到django.middleware.security.SecurityMiddleware的后面，这样开发环境也能正确返回application/javascript的MIME类型。

2. 生产环境（Nginx/Apache） #

• Nginx配置：在你的server配置块或者全局的mime.types文件里，确保有这一行：

  application/javascript js;
  

  加完后重启Nginx服务就行。
• Apache配置：在httpd.conf或者虚拟主机的配置文件里添加：

  AddType application/javascript .js
  

  保存后重启Apache。

3. 清除Firefox缓存 #

按Ctrl+Shift+Delete（Windows/Linux）或者Cmd+Shift+Delete（Mac）打开清除缓存面板，勾选“缓存”和“Cookie和站点数据”，清除后刷新页面，看看警告是不是消失了。

4. 验证修复效果 #

打开Firefox的开发者工具（F12），切换到「网络」标签，刷新页面找到你的online-v3.js文件，查看响应头里的Content-Type是不是application/javascript——如果是，就说明问题解决了。

内容的提问来源于stack exchange，提问作者Ranveer Singh