Dokku部署Django应用时Whitenoise静态文件404及MIME错误求助

核心问题分析 #

静态文件返回404且MIME类型显示为text/html，本质是服务器找不到目标静态文件，返回了404错误页面（HTML格式），进而触发浏览器的MIME类型校验报错。结合你的配置和dokku日志，从以下几点逐一排查：

1. 确保静态文件收集命令已执行 #

Whitenoise依赖STATIC_ROOT目录下的聚合静态文件，必须先执行收集命令将各APP的静态文件统一归集到该目录：

python manage.py collectstatic

部署dokku时需自动触发该命令：

• 可在项目根目录创建Procfile，添加部署前置步骤：

  release: python manage.py collectstatic --noinput
  web: gunicorn config.wsgi:application
  

• 或通过dokku配置强制开启收集：

  dokku config:set myapp DJANGO_COLLECTSTATIC=1
  

2. 修正BASE_DIR路径配置 #

当前BASE_DIR定义错误，导致STATIC_ROOT指向位置偏差：

# 错误配置（指向config子目录）
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
# 正确配置（指向项目根目录，适配settings.py在config子目录的结构）
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

错误的BASE_DIR会让静态文件被收集到config/staticfiles而非项目根目录的staticfiles，Whitenoise无法读取到正确位置的文件。

3. 验证静态文件目录的存在与权限 #

进入dokku容器检查静态文件状态：

dokku enter myapp
# 查看目标文件是否存在
ls -l staticfiles/css/ staticfiles/js/
# 检查目录权限，确保gunicorn进程（通常为www-data用户）可读取
ls -ld staticfiles

若目录为空，说明collectstatic未执行成功；若权限不足，执行：

chmod -R 755 staticfiles

4. 规范模板中静态文件的引用方式 #

模板必须使用Django的static标签引用文件，避免硬编码路径：

{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="{% static 'js/script.js' %}"></script>

硬编码路径可能因STATIC_URL变更或部署环境差异导致路径不匹配。

5. 本地环境复现验证 #

先在本地模拟生产环境排查配置问题：

1. 执行collectstatic
2. 用gunicorn启动服务（不要用Django自带的runserver）：

   gunicorn config.wsgi:application
   

3. 访问http://localhost:8000/static/css/style.css，若本地正常则问题出在dokku部署流程；若本地也报错，重新核对settings配置。

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