摘要：
token=target是目标服务器地址本地代理服务器请求数据的时候它会把我们本地的http:localhost:8080替换成http://m.maoyan.comchangeOrigin:true,//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题pathRewrite:{'^/api':'/'}//这里重写路径运行后就代理到对应地址如果不写这个.我们本请求的路径是/api/ajax/movieOnInfoList?当时我们有时候要跨域请求多个域名怎么办呢？这是后我们这要再配一个就代理就行了。
问题描述：
使用 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); }
输出：
成功了。
上面注释挺多的，可能看着眼晕，我在附一张简单的。
这样就实现了跨域向多个域名请求了。