最近在使用vue-cli搭建项目的过程中，遇到了跨域请求数据的问题，这里贴出我的解决方法，希望对大家有所帮助。
什么是跨域请求：
如果在A网站中，我们希望使用Ajax来获得B网站中的特定内容，如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。
这里，数据请求用的是vue-resource(目前vue官方是推荐使用axios)，安装插件：
npm install --save-dev vue-resource
在main.js中引入插件：
import VueResource from 'vue-resource'
Vue.use(VueResource)
这里，解决跨域使用的是http-proxy-middleware来进行接口代理，安装方法同上：
npm install --save-dev http-proxy-middleware
下面开始谈正事，举个栗子：
本地项目地址是：localhost:8080，现在我们要访问http://m.maizuo.com/v4/api/film/comming-soon 和http://m.maizuo.com/v4/api/billboard/home 这两个线上地址；
首先，设置build/dev-server.js：
var proxyMiddleware = require('http-proxy-middleware')
var server = express()
server.middleware = [
proxyMiddleware(['/film/coming-soon'], {target: 'http://m.maizuo.com/v4/api', changeOrigin: true}),
proxyMiddleware(['/billboard/home'], {target: 'http://m.maizuo.com/v4/api', changeOrigin: true})
];
server.use(server.middleware);
注意，当要访问多个线上地址时，公共的地址部分写在target属性值里面，比如这里的http://m.maizuo.com/v4/api，然后[ ]里边写地址的不同部分。
然后，修改config/index.js :
dev: {
env: require('./dev.env'),
port: 8080,
proxyTable: {
'/api': {
target: 'http://m.maizuo.com/v4/api',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
这里的target同上面的一样，然后'/api'和'^/api'代表的就是这个根目录地址；
然后，在页面中具体的调用为：
this.$http.get('api/billboard/home').then((response) => {
});
这里，url的值为api + [ ] 中的部分 ;
然后，我们就解决了vue中的跨域问题 ;
这里，贴一下http-proxy-middleware插件的github地址，看更多用法 :
https://github.com/chimurai/http-proxy-middleware
然后，就可以下班了~~~
