Javascript WebSocket连接失败。WebSocket握手期间出错-socketjs

详细信息：

我一直在尝试将react项目配置为使用

热加载程序

，这样我就可以在不重新启动服务器的情况下进行主动开发。每次websocket尝试连接时，我都会收到一条连续的错误消息：

WebSocket连接到“ws://192.168.33.10/sockjs-node/301/eo4p2zps/WebSocket”失败：WebSocket握手期间出错：意外响应代码：404

。我的直觉告诉我这可能与运行Ubuntu-v

14.04.3

的虚拟机（vagrant）有关。除了上面记录的错误，我还得到：

http://192.168.33.10/sockjs-node/629/s0dz3nxv/xhr_streaming?t=1482558136743 404 (Not Found)
http://192.168.33.10/sockjs-node/629/jbjciaga/eventsource 404 (Not Found)
http://192.168.33.10/sockjs-node/iframe.html 404 (Not Found)
http://192.168.33.10/sockjs-node/629/e1x0l01e/xhr?t=1482558137388 404 (Not Found)
Warning: [react-router] Location "/sockjs-node/629/dr44jysd/htmlfile?c=_jp.ajy5ad3" did not match any routes
client?e2df:41 [WDS] Disconnected!
Uncaught SyntaxError: Unexpected token <

server.js

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true,
    // It suppress error shown in console, so it has to be set to false.
    quiet: false,
    // It suppress everything except error, so it has to be set to false as well
    // to see success build.
    noInfo: false,
    stats: {
      // Config for minimal console.log mess.
      assets: false,
      colors: true,
      version: false,
      hash: false,
      timings: false,
      chunks: false,
      chunkModules: false
    }
}).listen(8080, 'localhost', function (err) {
    if (err) {
        console.log(err);
    }

  console.log('Listening at localhost:8080');
});

添加

另请参见我的错误的更多图形输出：

结论

---

如果你有任何建议或想法，请告诉我。如果我能提供更多细节，请告诉我

好吧，我知道我要说的很奇怪，但这就是我的遭遇

我假设您正在使用nginx代理。而“

WebSocket握手时出错-socketjs

”与chrome浏览器或WebSocket（ws）脚本无关。在firefox中也是同样的错误。（真的）过了一段时间，我发现“ws”脚本已经就绪，它与代理有关。它转到“404”，就好像websocket没有响应一样

我尝试将我的nginx代理位置设置为

location / {
    proxy_pass http://127.0.0.1:3000/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    #proxy_set_header Host $host;
}

这是有效的。nginx的代理设置必须至少指定头主机、连接。

---

我注释掉了

proxy\u set\u标题

，因为$host变量在您的端可能不同

我在浏览器上通过web套接字运行MQTT客户机时遇到了类似的问题。我通过重新混淆端口解决了这个问题。有两个端口，一个用于IPv4，另一个用于IPv6。我只需要使用一个。有趣的是，我认为

webpack dev server

可能被阻止了。让我看看端口配置。

location / {
    proxy_pass http://127.0.0.1:3000/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    #proxy_set_header Host $host;
}