Vue-cli 创建的项目配置跨域请求（通过反向代理）---配置多个代理--axios请求
问题描述：
使用 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); }
输出：
成功了。
上面注释挺多的，可能看着眼晕，我在附一张简单 的。
这样就实现了跨域向多个域名请求了。
