vue socketIo客户端连接java后端（vite实现前端代理跨域）

森～su

已于 2024-06-25 16:33:28 修改

阅读量937

点赞数 8

文章标签： vue.js 前端 javascript

于 2024-06-25 16:23:20 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_62263555/article/details/139961771

版权

中文互联网已经烂了，很多参考是没什么用的甚至是掐头去尾（胡编乱造），

反而是自己的分析+官方文档才是正路。（本文仅供参考，建议还是自己去分析问题以及参照官网）。（使用官方代理方法以及路径）

为什么用代理呢，是为了将浏览器的请求（类似重定向）发给前端服务器解决而不是直接打到后端。代理就会帮我们实现跨域，将不同host+port的域转成和你后端一样的域。

vite中文代理配置官网：开发服务器选项 | Vite 官方中文文档 (vitejs.dev)

  // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> 
  // 官方写法:                          ws://localhost:5174/socket.io
      '/socket.io': {
        target: 'ws://localhost:5174',
        ws: true,
      },

前端实现如下：

 const socket = io(`http://${location.host}?userId=${userId}`
        , {
        ackTimeout: 10000,
        retries: 5,
        autoConnect: true,
        transports: ['websocket','polling'],
        withCredentials: true,
    });

后端加上配置如下：

       //设置允许源
       config.setOrigin("*");
       //设置允许跨域
       config.setHostname("0.0.0.0");

vite.config.js代理实现代码：

'/socket.io': {
          target: 'http://localhost:9999',
          changeOrigin: true,
          secure: false,
          ws: true,
          onError(err, req, res) {
            console.error('Proxy error:', err);
          },
          onProxyReqWs(proxyReq, req, socket, options, head) {
            console.log('Proxying WebSocket request:', req.url);
          },

解释：有一个很坑爹的点就是，socketio客户端发送请求格式如下：

ws://localhost:3000/socket.io/?userId=10000000&EIO=4&transport=websocket

注意的点是我在请求路径上根本没写socket.io，他是所有请求都默认加上的，所以在做代理时就用他来做代理路径（不是可以，是唯一，如果你在创建socket的请求使用其他路径来做代理，那不好意思，会发生错误，错误一般是invaid namespace）。

对了，如果可以的话，真心建议看一下控制台每一个请求的信息，不断测试可能性，这样总比在“垃圾堆里”找答案好。（附：连接成功贴图