Heroku部署Django站点时部分CSS因MIME类型错误无法加载如何解决

错误本质 #

该报错的核心原因是请求CSS资源时，服务端返回的是404错误的HTML页面而非CSS文件，浏览器将HTML内容当做CSS解析因此触发MIME类型校验失败，你的配置共有三处错误/遗漏：

修正方案 #

• 第一：STATICFILES_DIRS配置错误，你将media目录加入了静态文件查找路径，media为用户上传资源目录，和项目静态资源混用会导致静态文件收集时路径冲突，部分CSS文件无法被正确识别收集。修正后配置如下：

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

• 第二：缺少WhiteNoise对应的静态存储配置，该配置用于生产环境下静态资源的压缩、路径哈希映射，是Heroku部署Django处理静态资源的必填项，在settings.py中添加如下配置即可：

STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"

• 第三：MEDIA资源配置不符合Heroku环境要求，Heroku的本地文件系统是临时非持久化的，且Django生产环境默认不提供MEDIA资源的访问服务，如果你有部分CSS文件存放在media目录下，访问时会直接返回404页面触发报错。修正方式为将所有静态CSS/JS/图片等资源统一存放到static目录下，如果你需要存储用户上传的媒体资源，需自行对接对象存储服务。

验证步骤 #

修改配置后本地先执行python manage.py collectstatic命令，确认无报错后重新部署到Heroku即可解决问题。

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