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

Proxy websockets connection within webpack-dev-server

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

开头

Webpack 开发服务器不支持代理 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 存在问题,因为 socket.io 被 WebpackDevServer 用于通知浏览器代码更改。 socket.io 可能与代理 websockets 冲突;在我的例子中,连接在从我的服务器返回握手之前被丢弃,除非它响应非常很快。

那时,我只是放弃了 WebpackDevServer 并使用了基于 react-hot-boilerplate

的自定义实现

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

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

@先生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
        ...