Rails 7使用Livereload遇MIME类型错误（X-Content-Type-Options: nosniff）

问题根源 #

Rails 7默认采用的asset处理方案（如Importmap、CSS Bundling）和Rails 6的Sprockets流程存在差异，Guard-Livereload的默认配置未适配新的asset路径规则，导致livereload请求误捕获了页面路由（如/seances），返回HTML而非正确的CSS MIME类型，进而触发浏览器拦截。

解决步骤 #

• 调整Rack-Livereload的资源监听范围
  新建或编辑config/initializers/rack_livereload.rb，明确限定仅监听asset资源路径，避免误抓页面路由：

  Rails.application.config.middleware.use Rack::LiveReload do |config|
    config.no_swf = true
    config.urls = %w[/assets/]
  end
  

• 修正Guardfile的监听路径
  根据你的Rails 7项目asset结构，明确指定要监听的CSS源文件路径：

  • 若使用传统Sprockets：

    guard :livereload do
      watch(%r{app/assets/stylesheets/.*\.css})
      watch(%r{app/views/.*/.*\.(erb|haml)})
    end
    

  • 若使用CSS Bundling（如Tailwind/Bootstrap）：

    guard :livereload do
      watch(%r{app/assets/stylesheets/application.*\.css})
      watch(%r{app/javascript/stylesheets/.*\.css})
    end
    

• 确保开发环境asset编译配置正确
  在config/environments/development.rb中确认：

  config.assets.compile = true
  config.public_file_server.headers = {
    'Cache-Control' => 'public, max-age=0'
  }
  

  前者确保未预编译的asset能动态编译，后者禁用浏览器缓存，避免旧CSS干扰重载。

• 适配Importmap（若使用）
  若项目用Importmap管理前端资源，在Guardfile中添加对配置文件的监听：

  guard :livereload do
    watch(%r{config/importmap.rb})
  end
  

执行完以上配置后，重启bundle exec guard和Rails服务器，再修改CSS文件即可正常重载。

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