跨域,配置代理服务器,解决
遇见跨域不用急 ,在vue的最初项目中,也就是与src同级目录,创建vue.config.js文件,配置完毕之后记得一定要重启项目,否则不会运行。
module.export={
devServer:{ // 开发服务器设置
proxy:{ // 代理
"/xx1":{
"target":"http://locathost:3000",
"changerOrigin":true,
"pathRewrite":{
"^/xx1":""
}
},
"/xx2":{
"target":"http://locathost:3000",
"changerOrigin":true,
"pathRewrite":{
"^/xx2":""
}
},
}
}
}
,上述是简单的配置了两个代理 ,如果当我们的api文件夹下有index.js文件或者其他文件的时候 ,假设index.js文件里的内容 我用了axios去请求接口
import axios from ‘axios’ //引入axios
//假设获取swiper轮播图数据
export const getSwiperData=()=>{
//拿到数据,那个网站服务器设置了cors跨域
return axios.get("https://www.xiongmaoyouxuan.com/api/tab/1?start=0");
}
当我们简写的时候就可以运用啥配置的代理服务器进行简化
export const getList=()=>{
return axios.get("/xx1/list")
//在这里的 /xx1 代表的就是那个配置过得接口地址,我们就简写化了解决跨域问题。
}