vue部署宝塔nginx配置(获取用户ip地址、反代理访问api接口、websocket转发)

以下配置为我自己的需求,因人而异,如果只是单纯的前端非交互页面,可以不用修改配置。

代码及注释,如下:

Puppet 复制代码
    #解决vue-router设置mode为history,去掉路由地址上的/#/后nginx显示404的问题
    location / {
      proxy_http_version 1.1;
      try_files $uri $uri/ /index.html;
    }
    
    #获取用户真实ip地址
    proxy_set_header Host $proxy_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    #反向代理访问api接口
    location /api{
        proxy_http_version 1.1;
        rewrite ^.?api/?(.*)$ /$1 break; 
        include uwsgi_params;
        proxy_pass http://XXX.XXX.XXX.XXX:8888;
    } 

    #https下使用wss的websocket转发
    location /chat{
      proxy_pass http://175.XXX.XXX.XXX:8082;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header X-real-ip $remote_addr;
      proxy_set_header X-Forwarded-For $remote_addr;
    }
相关推荐
Jul1en_6 分钟前
Claude 迁移 Codex 工作流迁移与更新
java·服务器·前端·后端·ai编程
Heo8 分钟前
14_React 中的更新队列 updateQueue
前端·javascript·面试
前端 贾公子14 分钟前
解决浏览器端 globalThis is not defined 报错
前端·javascript·vue.js
宁雨桥17 分钟前
前端与AI结合实战分享
前端·人工智能
之歆36 分钟前
DAY12_CSS3选择器全攻略 + 盒子新特性完全指南(下)
前端·javascript·css3
kyriewen1138 分钟前
代码写成一锅粥?3个设计模式让你的项目“起死回生”
开发语言·前端·javascript·设计模式·ecmascript
光影少年43 分钟前
react函数组件、类组件、纯组件、受控/非受控组件
前端·react.js·掘金·金石计划
程序员包打听43 分钟前
MoonBit 是什么?给第一次听说这门语言的你
前端·后端
Rkgua1 小时前
CSS动画效果
前端·css
Rkgua1 小时前
Flexbox 与 Grid 布局
前端·css