DRF+React待办应用运行空白，前端静态文件请求404报错

所有静态资源404的直接触发原因，是settings.py中的静态文件配置存在拼写错误，导致Django根本没有加载你指定的React静态资源目录。

具体错误点 #

• 你在配置中写的静态搜索目录字段为 STATICFILES_DIR，和Django官方约定的配置项名不符。正确的字段是复数形式的 STATICFILES_DIRS。
  因为字段名拼写错误，Django完全识别不到这个配置，自然不会去你指定的frontend_react/build/static目录下查找CSS、JS文件，访问对应路径就会返回404。
• settings.py文件末尾残留的无效文本r code here属于代码残留，会触发Python语法报错，需要直接删除。

完整修正步骤 #

1. 修正静态文件配置 #

打开settings.py，定位到静态文件配置段，修改为正确写法：

# 保持原有配置不变
STATIC_URL = '/static/'

# 修正拼写错误，启用静态资源目录搜索
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'frontend_react/build/static'),
]

注：当前你处于DEBUG = True的开发模式，修改完成后直接重启Django服务即可生效，不需要额外执行collectstatic归集命令。

2. 校验路径匹配关系 #

对照报错信息确认两个路径和实际文件位置完全对应：

• 模板文件路径：BASE_DIR/frontend_react/build/index.html 已被成功加载（如果模板不存在会直接抛出500模板找不到的错误，不会出现静态资源404）
• 静态资源文件：BASE_DIR/frontend_react/build/static/ 目录下确实存在报错中提到的三个文件：
  • css/main.f160e951.chunk.css
  • js/2.9db42ba3.chunk.js
  • js/main.77fbf7b1.chunk.js

3. 确认路由配置有效性 #

你当前的根路由配置path('', TemplateView.as_view(template_name='index.html'))本身没有问题，因为已经把React构建目录加入了TEMPLATES的搜索路径，Django可以正确返回index.html页面。

后续注意事项 #

• 开发阶段不要随意关闭DEBUG模式。DEBUG关闭后Django默认不会提供静态文件服务，哪怕配置完全正确也会持续返回404。如果后续要部署到生产环境，需要搭配Nginx等web服务器托管静态资源，再执行python manage.py collectstatic完成静态文件归集。
• 当前配置的CORS白名单仅适配React开发服务器的跨域请求，你现在直接通过Django端口访问前端页面，不存在跨域问题，这部分配置不影响静态资源加载。

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