奇葩事。

用http-proxy-middleware代理前端的websocket请求时，配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
// ~/src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function (app) {
    app.use(
        createProxyMiddleware('/ws', { 
            target: 'ws://localhost:8080',
            ws: true,
            changeOrigin: true,
            pathRewrite: { '^': '' }
        }),
    );
}

还有一个页面同步配置了一个websocket请求。

结果启动的时候，控制台疯狂报错：

但是一看后端，啥也没有。

一开始怀疑是websocket请求有问题，出现了误触，然后把请求代码注释掉了，结果还是一样的报错。

上网搜索，搜索的结果也是毫不相干的内容。

然后又尝试了把websocket请求加回来，运行了一下，发现是正常的，成功跟后端建立了websocket连接。那么这些报错就肯定自己写的websocket请求无关了。

最后还是GPT给了我启发：

简单来说，就是项目的依赖项可能也发送了websocket请求，原本好好的，但是代理一加，这些请求就报错了。

于是乎我把代理代码修改了一下，匹配内容由’/ws’改为了’/ws/chat’（提高匹配精度）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// ~/src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function (app) {
    app.use(
        // 只加了个/chat
        createProxyMiddleware('/ws/chat', { 
            target: 'ws://localhost:8080',
            ws: true,
            changeOrigin: true,
            pathRewrite: { '^': '' }
        }),
    );
}

控制台报错消失了，完美解决。

之前也做过类似的ws代理设置，但是当时设置‘/ws’代理没有出现问题，所以这次的问题就挺让我费解的，而解决方式却如此简单，遂记录于此。