vue cli3 简单解决跨域问题 2019.4.30

用vuecli3开发遇到跨域问题，网上查一堆，说的都很复杂，这里简单点说。

假设我们在开发一个项目，我这边写好了页面，同事写好了服务器，给的测试接口是：

http://192.168.1.1:8080/mobile/operation/reportForm/recordingTime.json，那么跨域就是如下解决
1.1.在根目录新建vue.config.js文件，文件内如下：

// // vue.config.js
module.exports = {
    devServer: {
      proxy: 'http://192.168.1.1:8080'//这里是你同事的域名，也就是另一台电脑的域名。
    }
  }

这个文件这样的设置就基本可以满足跨域问题。
如果有更多需求可以参考这里：https://cli.vuejs.org/zh/config/#devserver-proxy
2.封装axios，这里只是简单的封装一下，不封装也行，直接调用如下：

//封装http请求
import axios from "axios";
export default {
   http(url, success) {
      axios.get(
            url
         )
         .then(function (response) {
               success(response)
         })
         .catch(function (error) {
            // eslint-disable-next-line no-console
            console.log(error);
         });
   }
}

3.直接在应用页面调用。

import Http from "./../unit/testHttp.js";
export default {
  components: {},
  data() {
    return {
      isLoading: true
    };
  },
  created() {
    this.getData();
  },
  methods: {
    //获取数据
    getData() {
      const self = this;
      //这里就把后面的地址加上就行啦
      const url = "/mobile/operation/reportForm/recordingTime.json";
      const success = function(response) {
        const status = response.status;
        if (status == 200) {
          self.data = response.data;
        } else {
          console.log("获取失败");
        }
      };
      Http.http(url, success);
    },