1：进入项目，npm安装
npm install axios --save
2.在main.js下引用axios
import axios from 'axios'
3:准备json数据
自己写了一个json数据，放在服务器上，现在要通过vue项目调用数据
4：跨域问题，设置代理，利用proxyTable属性实现跨域请求
在config/index.js 里面找到proxyTable ：{} ，然后在里面加入以下代码
（这里处于安全考虑，我隐藏了自己的而服务器域名，如果需要测试，改成你自己的即可）
proxyTable: { '/api': { target: 'http://x.xx.xx.78:8091',//设置你调用的接口域名和端口号 changeOrigin: true,//允许跨域 pathRewrite: { '^/api': '' //这个是定义要访问的路径，名字随便写 } } },
5:打开一个界面picture.vue，开始写请求数据的方法
methods: { getData() { axios.get('/api/ConfigServer/picture.action').then(response => { console.log(response.data); }, response => { console.log("error"); }); } }
picture.vue参考代码：
<template> <div id="app"> </div> </template> <script> import axios from "axios"; export default { name: "app", data() { return { itemList: [] } }, mounted() { this.getData(); }, methods: { getData() { axios.get('/api/ConfigServer/picture.action').then(response => { console.log(response.data); }, response => { console.log("error"); }); } } } </script>
6：再次运行
npm run dev
运行成功之后，打开f12，查看network的请求
这个时候，我们可以看见，本地的localhost替代 了我之前放在服务器上的链接的域名，这也是设置代理成功，就解决了跨域的问题了。
请求成功
response里面也有返回值，ok,下一步就要开始将这些数据渲染在前端界面上面了。
