美文网首页
Vue使用代理解决小白接口跨域问题

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

作者: 帝王弦 | 来源:发表于2019-04-29 00:24 被阅读0次

    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.进行项目打包上传至服务器运行即可

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

    相关文章

      网友评论

          本文标题:Vue使用代理解决小白接口跨域问题

          本文链接:https://www.haomeiwen.com/subject/yzosnqtx.html