前端 webSocket配置代理

鲤鱼的日常生活2024-05-21 17:56

vue, react. nginx 配置反向代理，解决跨域问题

前端请求

如果配置了 wss 协议，可以将ws 替换为 wss

这里和我们通常使用的方式不同websocket 需要传入完整的地址，然后才能去做代理

javascript 复制代码

  let url = `${location.protocol === 'https' ? 'wss' : 'ws'}://${location.host}/ws/socket/io`;
  const socket = new WebSocket(url);

vite.config.ts给将 proxy

如果配置了 wss 协议，可以将ws 替换为 wss

javascript 复制代码

   "/ws": {
        target: "ws://localhost:8888", // 后端地址
        changeOrigin: true, //支持跨域
        ws: true, // 是否启用WebSocket代理
        rewrite: (path) => path.replace(/^\/ws/, ""), // 重写
      },

服务器 nginx 代理配置 ,配置后刷新就好了

javascript 复制代码

        # nginx配置websocket
    location /ws/ {
        rewrite /ws/(.*) /$1 break;
         target: "ws://localhost:8888",  #websocket地址
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_read_timeout 120s;
        proxy_set_header Upgrade websocket;
        proxy_set_header Connection Upgrade;
}

大概就这样，如果有问题后面胡补充@

前端 webSocket配置代理

前端请求

vite.config.ts给 将 proxy

服务器 nginx 代理配置 ,配置后刷新就好了

vite.config.ts给将 proxy