Heroku部署Django+React时报MIME type('text/html')非样式表支持类型如何解决？

你当前的settings.py静态文件配置逻辑正确，无需修改：

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'build/static'),
)

报错"MIME type ('text/html') is not a supported stylesheet MIME type"的本质是Django找不到对应静态资源，返回了404的HTML页面，浏览器把HTML内容当成CSS解析触发了报错，按以下步骤排查即可解决：

• 检查React的build目录是否正常提交
  很多项目默认把build目录加入.gitignore规则，推送到Heroku时不存在该目录，Django自然找不到静态资源。确认.gitignore移除了build相关规则，本地执行npm run build后将生成的build文件夹提交到Git。
• 配置whitenoise托管静态资源
  Django生产环境默认不提供静态文件服务，Heroku部署需要依赖whitenoise处理静态资源请求：
  先安装依赖：pip install whitenoise
  再修改settings.py的中间件配置，将whitenoise中间件放在最顶部：

  MIDDLEWARE = [
      'whitenoise.middleware.WhiteNoiseMiddleware',
      # 其余原有中间件保持不变
  ]
  

  最后添加静态文件压缩存储配置：

  STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
  

• 确认静态资源收集命令正常执行
  Heroku默认会在部署时自动执行python manage.py collectstatic --noinput，如果自动执行失败，可以安装Heroku CLI后手动触发：
  heroku run python manage.py collectstatic --noinput -a 你的Heroku应用名
• 检查路由优先级
  确保根路由中/static/开头的请求没有被优先级更高的通配路由拦截，静态资源相关路由要放在通配路由之前。

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