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

前端请求

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

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

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

 vite.config.ts给 将 proxy

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

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

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

        # nginx配置websocketlocation /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;
}

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