uni-app vue3 nginx反向代理到vite开发环境，因nginx端口和manifest.json配置端口不同导致websock连接失败页面一直刷新

操作步骤：

uniapp+vue3 nginx反向代理到vite开发环境，因为nginx端口80和manifest.json配置端口不同导致websock连接失败页面一直刷新

预期结果：

和uniapp+vue2.0一样可以用反向代理

实际结果：

vite服务器因为连接websocket 端口不同一直重试导致页面一直刷新

bug描述：

【报Bug】uniapp+vue3 nginx反向代理到vite开发环境，因为nginx端口80和manifest.json配置端口不同导致websocket连接失败页面一直刷新
附件为控制台报错。
可参考这个文章：https://www.cnblogs.com/yuejunasia/p/15669378.html

图片

项目信息表

信息	值
产品分类	uniapp/H5
PC开发环境	Windows
PC开发环境版本	win11
HBuilderX类型	正式
HBuilderX版本	3.4.7
浏览器平台	Chrome
浏览器版本	chrom
项目创建方式	HBuilderX

更多关于uni-app vue3 nginx反向代理到vite开发环境，因nginx端口和manifest.json配置端口不同导致websock连接失败页面一直刷新的实战教程也可以访问 https://www.itying.com/category-93-b0.html

yibo5220 1楼

在使用 uni-app 和 Vue3 开发时，如果你通过 Nginx 反向代理到 Vite 开发环境，并且遇到了 WebSocket 连接失败导致页面不断刷新的问题，通常是因为 Nginx 配置的端口与 manifest.json 中配置的端口不一致，导致 WebSocket 无法正确建立连接。

解决方案

确保端口一致：
- 首先，确保 Nginx 反向代理的端口与 manifest.json 中配置的端口一致。Vite 默认的开发服务器端口是 5173，但你可以通过 vite.config.js 或 manifest.json 进行修改。
修改 manifest.json：
- 在 manifest.json 中，确保 h5 配置中的 devServer 端口与 Nginx 反向代理的端口一致。例如：
```
{
  "h5": {
    "devServer": {
      "port": 5173
    }
  }
}
```

Nginx 配置：

在 Nginx 配置中，确保反向代理的端口与 manifest.json 中的端口一致。例如：

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:5173;
        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_set_header X-Forwarded-Proto $scheme;
    }

    location /sockjs-node {
        proxy_pass http://localhost:5173;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header Host $host;
    }
}

Vite 配置：
- 如果你在 vite.config.js 中修改了端口，确保与 manifest.json 和 Nginx 配置中的端口一致。例如：
```
export default defineConfig({
  server: {
    port: 5173
  }
});
```

uni-app vue3 nginx反向代理到vite开发环境，因nginx端口和manifest.json配置端口不同导致websock连接失败 页面一直刷新