Question

是否可以在webpack dev服务器中代理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 dev服务器不支持代理ws连接yet。

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

向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(...)

注意（使用一段时间后）

代理websockets存在问题，因为WebpackDevServer使用socket.io来通知浏览器代码更改。 socket.io可能与代理websockets冲突;在我的情况下，在从我的服务器返回握手之前连接被删除，除非它快速响应非常。

此时，我刚刚放弃WebpackDevServer并使用基于react-hot-boilerplate的自定义实现

Answer 3

@Mr。 Spice的回答是正确的。但可以进一步简化，检查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
        ...

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

3 个答案: