900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > vue cli 解决跨域 线上 nginx 反向代理配置

vue cli 解决跨域 线上 nginx 反向代理配置

时间:2020-11-09 00:05:13

相关推荐

vue cli 解决跨域 线上 nginx 反向代理配置

前后分离 axios 接 api 跨域问题如图:

解决办法:

1. npm start 本地开发环境解决:

在webpack配置文件 /config/index.js 里找到 proxyTable 开启代理changeOrigin:true,

proxyTable: {'/api':{target:'http://xx.xx.xx.xx:5568',changeOrigin:true,pathRewrite:{'^/api':'/api'}}},

2. npm run build 把 dist 放线上后解决:

nginx 的 配置文件 xx.conf 的server {} 里加如下:

location /api/ {# 把 /api 路径下的请求转发给真正的后端服务器proxy_pass http://xx.xx.xx.xx:5568;# 把host头传过去,后端服务程序将收到your.domain.name, 否则收到的是localhost:8080proxy_set_header Host $http_host;# 把cookie中的path部分从/api替换成/serviceproxy_cookie_path /api /;# 把cookie的path部分从localhost:8080替换成your.domain.nameproxy_cookie_domain localhost:80 http://xx.xx.xx.xx:5568;}

重新启动一下 nginx

/etc/init.d/nginx reload

api 跨域 访问成功

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。