Vue通过请求获取api接口数据/代理跨域

我知道也用过的有两种

vue-resource （已不维护了）
axios （越来越多人用）
vue代理跨域（补充）

那我们就来说是着么用吧

1. vue-resource

引入的方法有 3 种

引入 1 直接使用网络的引用地址（速度会慢一点）
引入 2 把包下载下来本地引用

引入 3 在项目中用 npm 下载引用在main.js文件内配置下载 npm i vue-resource -S 有cnpm最好用cnpm安装快

// 引入 包
import VueResource from 'vue-resource';
// 安装包
Vue.use(VueResource);
// 设置请求的根路径
Vue.http.options.root = 'http://127.0.0.1:5000'; // 我们访问后台的路径大多相同所以直接设置根路径就不用每次都全部打了

使用方法

<!-- body中的代码 -->
<div id="app">
    <!-- 引用 -->
  <input type="button" value="get请求" @click="getInfo" />
  <input type="button" value="post请求" @click="postInfo" />
  <input type="button" value="jsonp请求" @click="jsonpInfo" />
</div>

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
  },
  methods: {
    getInfo() { // 发起get请求
      //  当发起get请求之后， 通过 .then 来设置成功的回调函数
      this.$http.get('http://nodecms.applinzi.com/api/getcs').then(function (result) {
        // 通过 result.body 拿到服务器返回的成功的数据
        console.log(result.body)
      })
    },
    postInfo() { // 发起 post 请求   application/x-wwww-form-urlencoded
      //  手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
      //  通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
      this.$http.post('http://nodecms.applinzi.com/api/getpost', {}, {
        emulateJSON: true
      }).then(result => {
        console.log(result.body)
      })
    },
    jsonpInfo() { // 发起JSONP 请求
      this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
        console.log(result.body)
      })
    }
  }
});

2.axios

引入方法
- 方法1 项目安装 npm i axios -S (npm,cnpm,bower喜欢那个用那个)
- 方法2

用法和vue-resource差不多

main.js 配置

// 配置axios
import Axios from 'axios'
// 配置公共url
Axios.defaults.baseURL = 'http://127.0.0.1:5000/api/'
Vue.prototype.$axios = Axios

使用

this.$axios
  .get("getlunbo")
  .then(res => {
    // res.data.message = [{img: '图片地址'}]
    this.imgs = res.data.message;
  })
  .catch(err => console.log("轮播图获取异常"));

3.代理跨域

虽然上面的方法都挺好但是面对跨域问题，如果后端不去设置的话就会出现跨域获取出错的问题
这里只是说 vue-cli 开启的项目设置代理跨域因为其他的我不太会
现在流行前后台分离开发，就是前端先前端的页面，后端写后端的接口。但是，当两者的工作合并的时候，要么前端自己搭建一个服务器，要么后端开启跨域让前端访问接口，我一般在开发的时候采用的是后者。但是这个是很坑的，经常出现无法跨域的错误。
Vue-cli中自带了代理，当你配置了这个代理之后，你访问他人电脑的接口的时候，就像访问自己本机的接口一样，避免了跨域的问题。

cli2

首先找到，config下面的index.js，然后，打开，关键代码如下：

dev: {

  // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/Home' : {
        target: 'https://lit-plains-29389.herokuapp.com',
        changeOrigin: true,
      },
      "/api":{
        target: 'https://lit-plains-29389.herokuapp.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    },
  // Various Dev Server settings
  host: 'localhost', // can be overwritten by process.env.HOST
  port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
  autoOpenBrowser: false,
  errorOverlay: true,
  notifyOnErrors: true,
  poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

  // Use Eslint Loader?
  // If true, your code will be linted during bundling and
  // linting errors and warnings will be shown in the console.
  useEslint: false,
  // If true, eslint errors and warnings will also be shown in the error overlay
  // in the browser.
  showEslintErrorsInOverlay: false,

  /**
   * Source Maps
   */

  // https://webpack.js.org/configuration/devtool/#development
  devtool: 'cheap-module-eval-source-map',

  // If you have problems debugging vue-files in devtools,
  // set this to false - it *may* help
  // https://vue-loader.vuejs.org/en/options.html#cachebusting
  cacheBusting: true,

  cssSourceMap: true
}

target就是要代理到的目标地址，changeOrigin的意思相比不必多说了。至于pathRewrite，就是在这个例子中，比如/Home/Index就会映射到https://lit-plains-29389.herokuapp.com/Home/Index,
而如果开启了这个选项，比如第二个，假设/api/Home/Index,则会映射到https://lit-plains-29389.herokuapp.com/Home/Index。
简单点说就是做一个替换
说明：我的vue-cli所在的端口是localhos:8080

cli3

cli3 和cli2 有一定的区别，就是cli3没有了配置文件，那么我们需要自己去配置
1. 在根目录新建 vue.config.js 这个文件作为配置文件

写入配置代码

module.exports = {
  // 修改的配置
  // 将baseUrl: '/api',改为baseUrl: '/',
  baseUrl: '/',
  devServer: {
    proxy: { // 代理跨域
      '/api': { // 代理url关键字
        target: 'http://localhost:5000', // 需要代理的地址
        changeOrigin: true, // 是否跨域
        pathRewrite: { // 用来做字节更换，比如接口没有api的，那我们前端调用接口用api开头，在这里就把api替换为空，那就和后端结合了，如果不需要那就不加这个
          '^/api': ''
        }
      }
    }
  }
}