跨域的解决办法有很多,比如script标签 、jsonp、后端设置cros等等...,但是我这里讲的是webpack配置vue 的 proxyTable解决跨域。
访问接口:https://fs.52yiyantang.com/index.php?g=Fs&m=FsApi&a=index
那么在ProxyTable中具体配置如下:
proxyTable: {
'/api': {
target: 'https://fs.52yiyantang.com/', // 你要代理的域名和端口号,要加上http
changeOrigin: true,
pathRewrite: {
'^/api': '/' //或者 '^/api': ''
}
}
},
api配置部分:
axios请求页面代码:(this.GLOBAL.API_TEST2是我个人在mian.js中配置的)
注:proxy只是解决了开发环境的跨域,线上依然会产生跨域的问题。上线时需要配置nginx!
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:8080
proxy_set_header Host $http_host;
# 把cookie中的path部分从/api替换成/service
proxy_cookie_path /api /;
# 把cookie的path部分从localhost:8080替换成your.domain.name
proxy_cookie_domain localhost:80 http://xx.xx.xx.xx:5568;
}
重新启动一下 nginx