使用http-proxy-middleware解决vue开发中的跨域问题
一、vue-cli中使用代理解决跨域问题
1、首先安装axios与http-proxy-middleware(vue-cli中默认已经安装)
2、在config/index.js中的dev中配置
proxyTable: {
'/api':{
target:'http://xxx', //这是跨域目标域名
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
}
3、在main.js中加上如下配置:
Axios.defaults.baseURL = '/api/'
即可跨域,http://xxx已经用/api/来代替,不需要再写
二、在自己搭建的项目上使用代理解决跨域问题(webpack的webpack-dev-server中配置代理即可)
1、首先安装axios与http-proxy-middleware
2、在webpack配置文件webpack.config.js中,找到webpack-dev-server的配置进行配置,配置如下:
devServer:{
host:‘localhost’,
port:8080,
compress:true,
(proxy对象就是要添加的内容,其他的是原本webpack-dev-server的配置)
proxy:{
“/api”:{
target:‘http://xxx’(这是目标接口所在域名),
changeOrigin:true,
pathRewrite:{
‘^/api’:’’
}
}
}
}
3、现在就可以在开发环境中使用跨域了,这里用/api代替http://xxx,不想在Axios请求中每次都写/api可以在main.js中加入
Axios.defaults.baseURL = '/api/'即可。
这只是于开发过程中解决跨域问题,上线阶段就不适用了。