详解Vuejs2.0 如何利用proxyTable实现跨域请求
前言：
本地项目在请求远端服务器接口时，不可避免的会遇到跨域问题,即便是设置了Access-Control-Allow-Origin：*，在遇到登录这些需要本地存入cookie的也会很头痛，这里笔者介绍一个在vue-cli中配置代理来解决的办法。
在~/config/dev-server.js中使用了非常强大的http-proxy-middleware包。更多高级用法，请查阅其文档。
用法：
比如我们要请求的远端服务器为：http://192.168.400:3000
proxyTable:{
'/api/':{
target:'http://192.168.400:3000',
changeOrigin:true,//settheoptionchangeOrigintotrueforname-basedvirtualhostedsites
pathRewrite:{
'^/api':'/api'
}
},
},
- 通过设置changeOrigin:true开启代理
- pathRewrite意为重写路径
示例：
比如要请求的接口为http://192.168.400:3000/api/main/getUserInfo.action
this.$http.post('/api/main/getUserInfo.action')
.then(res=>{
console.log(res)
})
后续：
在实际工作中，我们还需要做些其他的，比如在axios中配置baseUrl：
/**
*CreatedbyAdministratoron2017/4/11.
*/
importaxiosfrom'axios';
//添加响应拦截器
axios.interceptors.request.use(function(config){
//配置发送请求的信息
returnconfig;
},function(error){
returnPromise.reject(error);
});
axios.interceptors.response.use(function(response){
//配置请求回来的信息
returnresponse;
},function(error){
returnPromise.reject(error);
});
varhttp=axios.create({
timeout:8000,/*设置请求超时时间*/
baseURL:'http://192.168.400:3000',
});
//Alterdefaultsafterinstancehasbeencreated
http.defaults.headers.common['Authorization']='';
exportdefaulthttp;
/**导出http，在mainjs中引用
importhttpfrom'./config/axiosConfig';
Vue.prototype.$http=http;
**/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。