VUE前后端分离 跨域访问后端接口 宝塔Nginx设置反向代理

VUE打包后生成的文件放到宝塔,能通过IP正常访问
但是调用后端接口的时候还是访问当前的IP
如访问的IP地址是192.168.1.139:8081/login
访问后端的接口是192.168.1.139:8081/api
实际后端接口是192.168.1.139:8199/api

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

在 网站设置 里找到反向代理
VUE前后端分离 跨域访问后端接口 宝塔Nginx设置反向代理_第1张图片
打开高级功能,里面的代理目录就是后端接口匹配的字符,例如后端接口都是用/api/xxx的形式,就填/api
目标URL填实际后端的接口地址,也可以是本地的127.0.0.1
VUE前后端分离 跨域访问后端接口 宝塔Nginx设置反向代理_第2张图片
具体配置:

#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/

你可能感兴趣的:(VUE,vue.js,后端,前端)