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;
    }
相关推荐
突然暴富的我7 分钟前
html三级菜单
前端·html
性野喜悲37 分钟前
vue通过后台返回的数字显示不同的文字内容,多个内容用、隔开
前端·javascript·vue.js
袁亦袁42 分钟前
通过属性透传,iview Table组件实现自适应高度
javascript·vue.js·iview
武汉前端开发蓝风1 小时前
前端Debugger时复制的JS对象字符转JSON对象
前端·javascript·json·debugger
爱编程的鱼1 小时前
HTML如何在图片上添加文字
前端·javascript·html
顶顶年华正版软件官方1 小时前
关键帧功能怎么使用 关键帧控制视频特效怎么用 会声会影视频剪辑软件教程
前端·javascript·音视频·学习方法·关键帧·会声会影教程·视频剪辑软件
来之梦2 小时前
uniapp自定义富文本现实组件(支持查看和收起)
前端·javascript·uni-app
森叶2 小时前
Electron开发 - 如何在主进程Main中让node-fetch使用系统代理
前端·javascript·electron
睿麒2 小时前
前端八股文 说一说样式优先级的规则是什么?
前端
甜兒.2 小时前
禹神electron学习~
javascript·学习·electron