源码:
创建vue.config.js
module.exports = {
devServer:{
//设置代理
proxy:{
'/api':{
target:'http://localhost:3000',//要跳转的位置
pathRewrite:{
'^/api':''
}
}
}
}
}
原理:
让proxy通过vue帮你产生一个代理服务器,然后通过这个代理服务器去请求数据,最后把请求的数据返回给你
1、/api,表示,哪一种接口需要使用跨域?如果我请求的路径是以/api开头,则使用代理服务器,毕竟不是所有的接口都需要使用跨域
2、target:要跨域跳转到的位置
3、 pathRewrite:{ '^/api':'' }:根据你访问的路径判断是否要使用跨域,如果是以/api开头的,则接下来拼接的时候,会把/api给省略掉
我们baseurl配置:baseURL: '/api',
然后请求登陆 /login,相当于路径是/api/login,
通过pathRewrite拼接重新后:
从:http://localhost:3000/api/login 把/api重写为空,即为:http://localhost:3000/login