在Rails+React项目中使用Ngrok与Livereload遇组件加载问题

问题核心是浏览器的混合内容安全策略：你访问的是HTTPS的Ngrok地址，但livereload使用的是非加密的ws://协议，浏览器会阻止这种不安全的资源加载，进而导致React组件无法正常加载。

以下是可行的解决办法：

• 配置livereload使用加密WebSocket（WSS）
  找到Rails项目中livereload的配置文件（通常是config/initializers/livereload.rb），将livereload的连接URL改为加密的wss://协议，匹配Ngrok的HTTPS域名：

  Rails.application.config.livereload.url = "wss://54gc-46-199-197-161.eu.ngrok.io:35729/livereload"
  

  重启Rails服务器后，livereload会通过加密连接和页面通信，不会触发混合内容阻止。

• 临时允许浏览器加载混合内容（仅测试用）
  如果只是临时调试，可以手动让浏览器允许该Ngrok域名加载不安全内容：

  • Chrome：打开chrome://settings/content/insecureContent，在"允许显示不安全内容"里添加你的Ngrok域名（https://54gc-46-199-197-161.eu.ngrok.io）
  • Firefox：在about:config中找到security.mixed_content.block_active_content，设置为false（调试完成后记得改回）

• 同步Rails资产主机配置
  检查Rails开发环境配置（config/environments/development.rb），确保资产主机指向Ngrok的HTTPS地址，避免React打包资源加载异常：

  config.action_controller.asset_host = "https://54gc-46-199-197-161.eu.ngrok.io"
  

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