哈喽哈喽，这里是小菜不拖延博主
博主是一个初学者，然后今天请教了一下关于跨域配置的一些问题，然后终于明白/api那一块的作用还有衍生出一些有意思的事情。
阅读这篇文章，你可以学到：
- proxy的作用
- pathRewrite里^/api的作用
proxy里代码的作用
1
vue.config.js
proxy:{
'/api':{
target:'http://localhost:9001',//跨域请求的公共地址
ws:false, //也可以忽略不写，不写不会影响跨域
changeOrigin:true, //是否开启跨域，值为 true 就是开启， false 不开启
pathRewrite:{
'^/api':''//注册全局路径， 但是在你请求的时候前面需要加上 /api
}
}
}
main.js
let baseUrl = '/api'
Vue.prototype.$baseUrl = 'http://10.108.37.62:9001'
axios.defaults.baseURL =baseUrl
//axios.defaults.headers.common['token'] = localStorage.getItem('token')
// axios.defaults.withCredentials = true//登录携带令牌
Vue.prototype.$http = (url, method, data, async, fun) => {
axios({
url: url,
method: method,
data: JSON.stringify(data),
async: async,
header:{
'Content-Type': 'application/json;application/octet-stream'
}
}).then(resp => {
fun(resp.data)
}).catch(err => {
console.log(err)
})
}
解释：当我们设置了/api之后，/api是匹配前缀的，他会出匹配地址当中出现的api开头的部分，然后匹配到了就做类似于转发。
就是，请求的地址其实是/api/地址，然后匹配到/api，然后/api就变成我设置的target那个
比如上述请求，我最开始的url是：baseURL+url，也就是/api/NewOperation,由于我们设置了proxy，/api去匹配api开头的，匹配到了
根据：
设置的地址，变成target里面的地址+/NewOperation，就是我们最后请求的地址（这里好像是有点像nginx代理转发的亚子）
浏览器中查看效果：
有些同学可能会疑惑为什么前面有一串本地地址，这个是协议主机名和端口号，哪个请求都会带上，正是因为这个地址和我们请求的地址不一样，才会造成跨域，这也是我们为什么要配置跨域的原因
2
这里的/api只是一个名字，我们也不一定要写成/api，你设置成其他样子也是可以的，举个栗子： vue.config.js
main.js
浏览器效果：
pathRewrite
这里的pathRewrite表示将以/api开头的请求路径都替换为/v1。也就是说，当我们发送一个请求/api/user/list时，实际上会被转换为http://localhost:3000/v1/user/list
有同学可能想说了（没错是我），既然如此，岂不是能在这里直接替换成请求地址，然后成功请求了?可以吗，答案是当然可以，当然由于我们每个请求的地址不一样，我们这样设置会只有一个接口请求成功，当然这里只是好玩我们这么设置，我们来看栗子
vue.config.js
proxy:{
'/200':{
target:'http://10.108.37.62:9001',//跨域请求的公共地址
ws:false, //也可以忽略不写，不写不会影响跨域
changeOrigin:true, //是否开启跨域，值为 true 就是开启， false 不开启
pathRewrite:{
'^/200':''//注册全局路径， 但是在你请求的时候前面需要加上 /api
}
}
main.js
let baseUrl = '/200'
Vue.prototype.$baseUrl = 'http://10.108.37.62:9001'
axios.defaults.baseURL =baseUrl
浏览器效果：
而且重点是！他不会显示^/api设置的替换调的内容：比如，^/api:'/NewOperation'，此时在浏览器里面显示的也只会是一个api，不会显示替换的“/NewOperation”
总结
那有同学就会问了，这样有什么作用呢?
因为网页上无法查看到替换的内容，那么我们用pathRewrite就可以很好的隐藏我们真实的请求地址了呀！
