对于前端开发人员来讲,当你在开发环境中与后台开发人员进行数据联调时,总会遇到烦人的跨域问题!
解决跨域的方法有很多种,比如你和后台人员经过友好协商后,你可以通过JSONP的方式或者让后台人员将代码设置为允许你进行跨域!但是往往前后台开发人员的配合默契度是不太高的。如果后台只给你接口,并明确告诉你不允许修改接口,怎么办?怎么办才能实现跨域?此时你就可以通过proxyTable来解决跨域问题!
通过proxyTable解决跨域在Vue-cli当中是很简单的。只需修改config文件夹下的index.js中的proxyTable就能实现:
//代理配置表,在这里可以配置特定的请求代理到对应的API接口
proxyTable:{
"/api":{
target:"http://www.zhangpeiyue.com",//访问的服务器地址
changeOrigin:true,//true为开启代理
//secure: true, // 如果是https接口,需要配置这个参数
pathRewrite:{
'^/api': '/'//路径的替换规则
/*
*这里的配置是正则表达式,以/api开头的路径将会被‘/'替换掉
*假如后台文档的接口是 "http://www.zhangpeiyue.com/user/add"
*前端调取API接口应写:axios.get('/api/user/add')
*/
}
}
}
以上代码的“/api"你可以认为用于代替target里面的地址,调取接口的地址直接用api来替换。
比如后台接口地址为:"http://www.zhangpeiyue.com/user/login"。
你可以直接写为:"/api/user/login"即可。
当然,你也可以根据不同的API域名所负责的模块不同来进行多项配置:
//代理配置表,在这里可以配置特定的请求代理到对应的API接口
proxyTable:{
"/adv":{
target:"http://adv.zhangpeiyue.com",//访问的服务器地址
changeOrigin:true,//true为开启代理
pathRewrite:{
'^/adv': '/'//路径的替换规则
}
},
"/user":{
target:"http://user.zhangpeiyue.com",//访问的服务器地址
changeOrigin:true,//true为开启代理
pathRewrite:{
'^/user': '/'//路径的替换规则
}
}
}
以上代码"/adv"与"/user"分别负责项目中的广告模块与用户模块。
例如:
后台文档的地址是:“http://adv.zhangpeiyue.com/add”,
前端调取API接口应写:axios.get('/adv/add')
注意:
配置修改完以后一定要重新npm run dev 一次
补充:
changeOrigin的属性值为一个布尔值,如果设置为true,那么本地会虚拟一个NODE服务端接收你的请求并代你发送该请求(中间件)。因为服务端语言是没有跨域问题的,所以这样最终就解决了跨域问题了。不过这只适用于开发环境,上线后可以使用反向代理nginx。