在前后端分离进行开发时，跨域问题是必然存在的，之前一直使用的谷歌浏览器跨域，最近在使用vue-cli进行开发时，同样遇到了跨域问题，当然设置谷歌浏览器跨域也是可行的，但是vue-cli使用了node等一系列的工具，那合尝不试试新东西呢。
配置代理：
找到config目录下的index.js文件，文件中有这样一行代码proxyTable: {}，这是作者给开发者留下的空缺，用来配置一些代理规则
proxyTable: {
'/api': {
target: 'http://www.xxx.com', // 你接口的域名
secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: { //重写接口地址
'^/api': '/'
}
}
}
其中 '/api' 为匹配项，target 为被请求的地址，这样只要接口地址是以"/api/*"开头的，都会走代理接口，但是问题来了，我们项目的接口开头字段不统一，那我们只能手动给每个ajax请求接口前面加上"/api"，如果使用了 axios，可以全局配置一个 baseURL，这样就不用挨个儿修改 url 了
axios.defaults.baseURL = '/api'
此时我们来看看ajax请求变成什么样了
设置代理后的ajax请求
纳尼，404了，因为在 ajax 的 url 中加了前缀 '/api'，而原本的接口是没有这个前缀的，所以需要通过 pathRewrite 来重写地址，将前缀 '/api' 转为 '/'
proxyTable: {
'/api': {
target: 'http://www.xxx.cn', // 你接口的域名
secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: { //重写接口地址
'^/api': '/'
}
}
}
我们再来看看网络请求
重写地址后的请求
可以看到接口200了，虽然我们加了前缀，但是真实的请求是没有前缀的。
写这篇文章只是记录下自己的学习记录，始终坚信一句话，我们都是站在巨人的肩膀上作代码的搬运工，没有什么不可能。
