proxy - webpack-dev-server 中的代理 websockets 连接

Question

是否可以在 webpack 开发服务器中代理 websocket 连接？我知道如何将常规 HTTP 请求代理到另一个后端，但它不适用于 websockets，大概是因为代理配置中的目标以 http://...

Answer 1

webpack-dev-server 1.15.0 版本支持代理 websocket 连接。将以下内容添加到您的配置中：

devServer: {
  proxy: {
    '/api': {
       target: 'ws://[address]:[port]',
       ws: true
    },
  },
}

Answer 2

Webpack开发服务器还不支持代理 ws 连接。

在此之前，您可以通过向http-proxywebpack 服务器添加额外的内容来手动实现代理：

• 将新的依赖项添加到package.json：

  "http-proxy": "^1.11.2"
  

• upgrade通过监听事件 手动代理 websocket 连接

  // existing webpack-dev-server setup
  // ...
  var server = new WebpackDevServer(...);
  
  proxy = require('http-proxy').createProxyServer();
  server.listeningApp.on('upgrade', function(req, socket) {
    if (req.url.match('/socket_url_to_match')) {
      console.log('proxying ws', req.url);
      proxy.ws(req, socket, {'target': 'ws://localhost:4000/'});
    }
  });
  //start listening
  server.listen(...)   
  

注意（使用一段时间后）

WebpackDevServer 使用代理 websocketssocket.io来通知浏览器代码更改存在问题。socket.io可能与代理 websocket 冲突；在我的情况下，除非它响应非常快，否则在从我的服务器返回握手之前断开连接。

那时，我只是放弃了 WebpackDevServer 并使用了基于react-hot-boilerplate 的自定义实现

Answer 3

@先生。香料的答案是正确的。但还可以进一步简化，查看http-proxy-middleware，可以设置如下，也就是ws: true像往常一样添加并保持其他设置。

// proxy middleware options
var options = {
        target: 'http://www.example.org', // target host
        changeOrigin: true,               // needed for virtual hosted sites
        ws: true,                         // proxy websockets
        ...