VUE前后端分离 跨域访问后端接口 宝塔Nginx设置反向代理_vue前后端分离 跨域访问后端接口 宝塔nginx设置代理-CSDN博客

VUE打包后生成的文件放到宝塔，能通过IP正常访问

但是调用后端接口的时候还是访问当前的IP

如访问的IP地址是192.168.1.139:8081/login

访问后端的接口是192.168.1.139:8081/api

实际后端接口是192.168.1.139:8199/api

使用宝塔面板的反向代理。

在 网站设置 里找到反向代理

打开高级功能，里面的代理目录就是后端接口匹配的字符，例如后端接口都是用/api/xxx的形式，就填/api

目标URL填实际后端的接口地址，也可以是本地的127.0.0.1

具体配置：

#PROXY-START/

# 所有静态请求都由nginx处理，存放目录为/www/wwwroot/hat.com

location ~ \.(htm|html|js|css|jpg|png|gif|eot|svg|ttf|woff|woff2)$ {

root    /www/wwwroot/hat.com;

}

location /api

{

    proxy_pass http://127.0.0.1:8199;

    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 REMOTE-HOST $remote_addr;

    add_header X-Cache $upstream_cache_status;

    #Set Nginx Cache

    add_header Cache-Control no-cache;

}

#PROXY-END/

AI写代码

bash

————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/weixin_43924621/article/details/121039944