问题描述：
使用 Vue-cli 创建的项目，开发地址是 localhost:8080，需要访问 localhost:9000 或https://m.maoyan.com或http://image.baidu.com上的接口
分析原因：
不同域名之间的访问，需要跨域才能正确请求。跨域的方法很多，通常都需要后台配置
不过 Vue-cli 创建的项目，可以直接利用 Node.js 代理服务器，实现跨域请求
如果使用了 axios，可以全局配置一个 baseURL，这样就不用挨个儿修改 url 了
axios.defaults.baseURL = '/api'
大家经常用的方法：
在 config>index.js 的 dev 中添加配置项 proxyTable：
proxyTable: {
//本地调试
'/api': { //这里是我配置的名字
target: 'http://m.maoyan.com', //你要请求的第三方接口
changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {'^/api': '/'} //这里重写路径运行后就代理到对应地址
/*
想请求接口是 http://m.maoyan.com/ajax/movieOnInfoList?token=
target 是 目标服务器地址 本地代理服务器请求数据的时候它会把我们本地的 http:localhost:8080 替换成 http://m.maoyan.com
changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {'^/api': '/'} //这里重写路径运行后就代理到对应地址
如果不写这个.我们本请求的路径是 /api/ajax/movieOnInfoList?token= ,
本地代理服务器补全路径后 就是 http:localhost:8080/api/ajax/movieOnInfoList?token=
这和原 接口地址 比较 是 域名不一样(这个在target已经处理过了， 相当于一样了) ， 还多了一个 /api，所
以我们要把他处理掉， 通过pathRewrite: {'^/api': '/'} ，意思是 把 '/api' 替换成 '/',
这样 本地代理服务器请求地址就变成 http:localhost:8080//ajax/movieOnInfoList?token=
(接口于接口之间多写/ 没事会自动处理掉，上面也可以写成 pathRewrite: {'^/api': ''} )，
但是这样写不好， 接口于接口之间放个空 语义不强， 所以建议放个 '/'
*/
}
},
经过上面的配置就可以这样去请求 https:m.maoyan.com 上的接口了。
async mounted(){
let data = await data = await this.$http.get('/api/ajax/movieOnInfoList?token=');
console.log(data);
}
我这里$http就是axios, 因为我这里把axios挂载到了vue实例上，并重命名为 $http
import axios from 'axios' //引入 axios 异步请求工具 插件 import store from './store'; Vue.prototype.$http = axios;
// 把 axios 方法 通过 原型 挂载 到vue根实例上（自定义key值为$http,vue实例也是一个对象嘛，所以可以自定义），
// 这样 在vue项目里哪里都可以用了，不用单个mport axios from 'axios' 引入了。
//就可以以 this.$http.get().then(function(){}).catch(function(){}) 的形式去使用了,post 请求类似 get请求。
这样对只跨域请求一个域名上的数据，就完成了。当时我们有时候要跨域请求多个域名怎么办呢？
例如： 我们即要请求 https://m.maoyan.com上的接口，又要请求 http://image.baidu.com上的接口。
这是后我们这要再配一个就代理就行了。代码如下：
proxyTable: {
//本地调试
'/api': { //这里是我配置的名字
target: 'http://m.maoyan.com', //你要请求的第三方接口
changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {'^/api': '/'} //这里重写路径运行后就代理到对应地址
/*
想请求接口是 http://m.maoyan.com/ajax/movieOnInfoList?token=
target 是 目标服务器地址 本地代理服务器请求数据的时候它会把我们本地的 http:localhost:8080 替换成 http://m.maoyan.com
changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {'^/api': '/'} //这里重写路径运行后就代理到对应地址
如果不写这个.我们本请求的路径是 /api/ajax/movieOnInfoList?token= ,
本地代理服务器补全路径后 就是 http:localhost:8080/api/ajax/movieOnInfoList?token=
这和原 接口地址 比较 是 域名不一样(这个在target已经处理过了， 相当于一样了) ， 还多了一个 /api，所
以我们要把他处理掉， 通过pathRewrite: {'^/api': '/'} ，意思是 把 '/api' 替换成 '/',
这样 本地代理服务器请求地址就变成 http:localhost:8080//ajax/movieOnInfoList?token=
(接口于接口之间多写/ 没事会自动处理掉，上面也可以写成 pathRewrite: {'^/api': ''} )，
但是这样写不好， 接口于接口之间放个空 语义不强， 所以建议放个 '/'
*/
},
//因为我们 登录页的 请求接口 是 https://i.meituan.com 所以我们要在配一个代理：
//本地调试
/*
注意这里不能用 '/api/baidu' 因为 这样当你到调用的时候
（原始接口： http://image.baidu.com/search/wisejsonala?tn=wisejsonala&ie=utf8&cur=result&word=%E6%91%84%E5%BD%B1%E5%B8%88%E9%99%88%E7%A3%8A&fr=&catename=&pn=0&rn=3&gsm=1e000000001e ）
你调用的是后 会这样写 this.$http.get('/api/baidu/search/wisejsonala?tn=wisejsonala&ie=utf8&cur=result&word=%E6%91%84%E5%BD%B1%E5%B8%88%E9%99%88%E7%A3%8A&fr=&catename=&pn=0&rn=3&gsm=1e000000001e')
这样就 会先匹配到 '/api' 这个暗号，代理请求到 http://m.maoyan.com， 但这并不是我们想要的，所以我们得重新写一个区别于上上面的暗号。
因为这个地方因为个人爱好的问题。 要统一写 '/api' 这个形式，可以把 猫眼域名 的暗号 改成 '/api/maoyan', 把 百度域名的暗号 改成 '/api/baidu' 这样就有统一的入口 '/api' 了。
我这里不统一改了。因为上面 的 '/api' 用的地方挺多的，这里一改，其他地方也要动。
统一管理的代码：
'/api/maoyan': { //这里是我配置的名字
target: 'http://m.maoyan.com', //你要请求的第三方接口
changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {'^/api/maoyan': '/'} //这里重写路径运行后就代理到对应地址
},
'/api/baidu': { //这里是我配置的名字
target: 'http://image.baidu.com', //你要请求的第三方接口
changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {'^/api/baidu': '/'} //这里重写路径运行后就代理到对应地址
}
使用时：
1： this.$http.get('/api/maoyan/ajax/movieOnInfoList?token=');
2: this.$http.get('/api/baidu/search/wisejsonala?tn=wisejsonala&ie=utf8&cur=result&word=%E6%91%84%E5%BD%B1%E5%B8%88%E9%99%88%E7%A3%8A&fr=&catename=&pn=0&rn=3&gsm=1e000000001e');
*/
'/baidu': { //这里是我配置的名字
target: 'http://image.baidu.com', //你要请求的第三方接口
changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {'^/baidu': '/'} //这里重写路径运行后就代理到对应地址
}
},
测试使用'/baidu' ：
async mounted(){
// let data = await this.$http.post('https://i.meituan.com/account/custom/mobilelogincode2');
let data = await this.$http.get('/baidu/search/wisejsonala?tn=wisejsonala&ie=utf8&cur=result&word=%E6%91%84%E5%BD%B1%E5%B8%88%E9%99%88%E7%A3%8A&fr=&catename=&pn=0&rn=3&gsm=1e000000001e');
console.log(data);
}
输出：
成功了。
上面注释挺多的，可能看着眼晕，我在附一张简单 的。
这样就实现了跨域向多个域名请求了。