Proxy webpack开发服务器内的代理WebSocket连接

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

网页包开发服务器不支持代理ws-connections

在此之前，您可以通过向webpack服务器添加额外的

http代理来手动实现代理：


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

"http-proxy": "^1.11.2"


通过侦听
升级
事件手动代理websocket连接



注意（使用一段时间后）

将WebSocket代理为
套接字时出现问题。WebpackDevServer使用io
通知浏览器代码更改<代码>套接字。io

可能与代理WebSocket冲突；在我的例子中，在握手从我的服务器返回之前，连接被中断，除非它响应得非常快

---

此时，我刚刚抛弃了WebpackDevServer，使用了基于WebpackDevServer支持代理websocket连接的1.15.0版的自定义实现。将以下内容添加到您的配置中：

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

---

@Spice先生的回答是正确的。但它可以进一步简化，检查，它可以设置如下，即只需添加

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
        ...

---

对不起@Quilang，但是我发现你的例子不足以回答这个问题。OP正在上下文网页包dev服务器中查找内容。从您的回答中，我无法理解这与用于代理的node.js中间件有何关系。devServer:options看起来像什么？webpack dev server使用http代理中间件，所以webpack dev服务器的代理设置实际上是http代理中间件选项。他们是一样的。我不明白他说的“进一步简化”是什么意思though@rosencreuz-我想简化是，您不必同时指定target:'ws://'和ws:true-根据文档，其中一个就足够了。当您希望代理http和ws时，这非常有用，因此您可以只保留目标：“http://”，他们应该在文档中以粗体显示。我现在浪费了几个小时来弄清楚socket.io为什么使用轮询而不是web sockets。OP，你能提供一些你为什么需要这样做的背景吗？

devServer.public

是否不够（似乎它会将您的所有WDS请求发送到该公共域/主机）？

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