Vue使用代理解决小白接口跨域问题

1.下载okayapi.php文件

提取码: 47ns

修改为自己的app_key,app_secrect,接口域名

app_key,app_secrect,接口域名查看地址: http://open.yesapi.cn/?r=App/Mine

2.修改好后保存,上传到服务器根目录

虚拟空间

3.用vue-cli创建项目

(官方文档有教程)

4.安装axios

cnpm install axios -S    //我使用的cnpm
//main.js配置
import axios from 'axios';
Vue.prototype.$axios = axios;
Vue.prototype.axiosUrl="api.php";  //这里就是你在服务器放的位置以及名称,如果你们没改名字,就是okayapi.php

5.组件中使用

methods: {
    btn() {
      var params = {
        s: "App.Hello.World", // 必须，待请求的接口服务名称
        name: "hello"    //需要请求的数据
      };
      this.$axios({
        url: this.axiosUrl,
        method: "post",
        data: params
      })
        .then(res => {
          console.log(res);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }

6.进行项目打包上传至服务器运行即可

之前由于在这里碰壁太多,根据官方文档整理得出此文章,如有错误,请留言指出.
小白接口地址:点击访问