vue（2.x，3.0）配置跨域代理
导语：首先，每一个前端开发人员都应该知道同源策略，同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源，所谓同源是指，域名，协议，端口相同。有一个不同时，都将请求不到资源，将无法“跨域”获取资源。
vue3.0
从最新版开始，首先是在所有请求的文件中写好请求
importVuefrom'vue'
importaxiosfrom'axios'
importVueAxiosfrom'vue-axios'
Vue.use(VueAxios,axios)
letapiCrfCod=Vue.axios.create({
method:'GET',
baseURL:'/apis/'
})
letapiResource=Vue.axios.create({
method:'GET',
baseURL:'/service/'
})
getServiceChannels:(opts)=>{
returnapiCrfCod({
url:'/rest/collection/getService/XXXX',//此处写地址，不具体举例
params:{
...opts
}
})
}
在vue.config.js中配置代理
module.exports={
baseUrl:'',
outputDir:'dist',
devServer:{
//配置服务器代理
proxy:{
"/apis":{//代理接口前缀为/apis的请求
"target":'https://www.baidu.com/',//对应的代理地址
"secure":false,//接受运行在https上，默认不接受
"changeOrigin":true,//如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求，这样就不会有跨域问题（只适合开发环境）
"pathRewrite":{//重写路径比如'/apis/aaa/ccc'重写为'/aaa/ccc'
'^/apis':''
}
},
//配置多个代理
"/service":{
"target":'https://www.google.com/',
"secure":false,
"changeOrigin":true,
},
}
},
}
vue2.X
请求还是按上述代码，下面是配置代理部分
在config文件夹下的index.js中，配置proxyTable，原本的proxyTable中为空
proxyTable:{
'/apis':{
target:"https://www.baidu.com/",//目标地址
changeOrigin:true,//是否跨域
pathRewrite:{//重定向地址
'^/apis':''
}
}
},
上述就是vue3.0和2.x的配置跨域部分，记得配置完代理需重启项目！！！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。