Rails5使用Webpacker Dev Server时sockjs-node/info请求失败问题

首先，帮你理清几个核心问题，再给出针对性的修复方案：

这些sockjs-node/info请求是什么？ #

sockjs-node/info 是webpack-dev-server用来初始化WebSocket连接的前置协商请求。哪怕你把hmr设为false，只要开启了inline: true（你的配置里是开启状态），webpack-dev-server就会自动往页面注入客户端代码，尝试和服务器建立WebSocket连接——目的是监听本地代码变化，实现页面自动刷新。这个请求失败，本质是客户端找不到正确的WebSocket服务器地址。

需要关注这些报错吗？ #

虽然目前应用能正常运行，但这些冗余报错会干扰你排查其他潜在问题；而且如果之后你想启用热模块替换（HMR），这个问题会直接导致HMR无法工作。所以建议还是修复掉。

修复方案 #

结合你的场景（外网通过fizzbuzz.dev访问，使用forwardHQ），问题根源在于webpacker.yml里的public配置不正确，客户端无法解析到正确的WebSocket服务器地址。试试下面几个步骤：

1. 更正public地址配置 #

把dev_server下的public改成你的外网访问域名+端口：

development:
  <<: *default
  compile: true
  dev_server:
    https: true
    host: 0.0.0.0
    port: 3035
    public: fizzbuzz.dev:3035  # 替换为你的外网域名+端口
    hmr: false
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/

解释：public是webpack-dev-server告知客户端用来连接WebSocket的地址，之前设为0.0.0.0:3035，外网浏览器根本无法访问这个本地地址，所以请求失败。换成fizzbuzz.dev:3035后，客户端会通过forwardHQ转发到你的本地webpack-dev-server。

2. 确认forwardHQ的端口转发 #

确保forwardHQ已经把外网的3035端口映射到你本地的3035端口——如果forwardHQ默认只转发了Rails的端口（比如3000），你需要额外配置转发3035端口，否则外网无法访问你的webpack-dev-server。

3. 若不需要自动刷新，关闭inline模式 #

如果你不需要webpack-dev-server自动刷新页面，直接把inline: true改成false：

inline: false

这样webpack-dev-server不会注入WebSocket客户端代码，也就不会发起sockjs-node/info请求了，控制台会立刻恢复干净。

请求成功后会带来什么变化？ #

• 如果保留inline: true：当你修改本地React或前端代码时，webpack-dev-server会通过WebSocket通知浏览器自动刷新页面，不用手动刷新就能看到最新修改。
• 如果之后开启hmr: true：还能实现热模块替换——不用刷新整个页面，只更新修改的组件，大幅提升开发效率。

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