CRA搭配Django后端开发模式下bundle.js因MIME不匹配被拒绝执行

开发模式下的脚本MIME类型报错核心原因是bundle.js请求未匹配到对应静态资源，被Django的前端全路径兜底路由拦截，返回了text/html格式的HTML页面内容，触发浏览器严格MIME校验拦截。生产环境无异常，说明静态文件目录配置、模板资源引用的基础链路是通畅的，问题仅存在于开发模式下的路由优先级规则、webpack-dev-server产物输出配置两个环节。

• 调整Django路由匹配优先级
  • 必须将静态资源服务路由规则放在捕获全路径的前端兜底路由之前注册，避免/bundle.js这类静态请求被兜底逻辑拦截，直接返回HTML页面
  • 核查兜底路由的通配规则，确认不会覆盖静态资源的请求路径
• 校验react-app-rewired覆盖的Webpack配置匹配性
  • 确认dev server配置中writeToDisk: true已开启，保证webpack-dev-server的编译产物会写入磁盘文件，而非仅存在dev server的内存空间，让Django静态文件查找器可以直接读取到产物
  • 全链路对齐路径配置：Webpack配置的output.publicPath与Django settings中的STATIC_URL取值完全一致；dev server的输出目录包含在STATICFILES_DIRS的扫描路径列表中
• 修正模板的静态资源引用方式
  • 替换frontend.html中硬编码的bundle.js引用路径，使用Django内置的static模板标签拼接正确的静态资源路径，避免路径错位触发兜底路由
• 补充开发环境的MIME类型兜底映射
  • 在Django settings的DEBUG分支中，手动注册JS文件的正确MIME类型，避免静态文件服务返回错误的Content-Type：

    if DEBUG:
        import mimetypes
        mimetypes.add_type("application/javascript", ".js", True)
    

• 若采用Django反向代理转发webpack-dev-server请求的开发模式，需确认代理规则中已将静态资源请求正确转发至webpack-dev-server的运行端口，避免代理规则错位导致请求落在Django本地视图上返回HTML
• 不要通过关闭浏览器“严格MIME类型校验”选项临时绕过问题，该操作会带来跨站脚本攻击风险，且无法从根本上解决资源路径不匹配的核心问题

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