如何在VUE-CLI应用程序中正确设置devServer for WebSocket代理 [英] How to correctly setup devServer for WebSocket proxying in a vue-cli app

问题描述

我有一个Node.js服务器在http://localhost:8080上运行，有两个路由：

• "/"：服务/public/index.html。
• "/rest"：返回{ ok: true }。

此服务器还在同一端口上运行WebSocket连接。在index.html内部，我使用const socket = new WebSocket("ws://" + window.location.host)连接到服务器。

当我运行此服务器并访问http://localhost:8080时，以下内容工作正常：

• 提供索引：是✅
• 返回json：是✅
• WebSocket Messaging：YES✅

---

此外，我还在http://localhost:8079以开发模式运行vue-cli应用程序，配置如下：vue.config.js

...
devServer: {
  port: 8079,
  "/": {
    target: "http://localhost:8080/",
    ws: true
  },
}

当我运行此应用程序并访问http://localhost:8079时，会发生以下情况：

• 提供索引：是✅，表示代理正在为此路由工作。
• 返回json：是✅，表示代理正在处理该路由。
• WebSocket消息：没有❌，我收到错误&qot；到‘ws：//localhost：8079/’的WebSocket连接失败：建立连接时出错：NET：：ERR_CONNECTION_REJECTED&QOT；

---

我做错了什么？我如何修复它？

如您所见，我还包括了用于代理WebSocket连接的ws: true。

推荐答案

我在vue.config.js中有以下内容：

  devServer: {
    proxy: {
      '^/': {
        target: 'http://localhost:8089',
        ws: true,
        changeOrigin: true
      }
    }
  }

WebSocket后端在端口8089上运行。 所有%ws流量都代理到后端。

这篇关于如何在VUE-CLI应用程序中正确设置devServer for WebSocket代理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！