您现在的位置是:网站首页>>前端技术>>Vue

基于vue的iview接口配置如何使用axios跨域访问数据

发布时间:2018-06-19 15:26:13作者:wangjian浏览量:519点赞量:0

    一、安装axios

    使用axios,当然需要先安装它。执行 cnpm install axios

    安装qs,执行:

    cnpm install qs

    二、客户端配置

    引入并且配置axios

    image.png

    image.png

    image.png

    三、服务器端配置

    调用接口添加如下代码:

    header('Access-Control-Allow-Origin:*');
    header('Access-Control-Allow-Methods:GET,POST,PATCH,PUT,OPTIONS');

    四、axios跨域方法封装

    image.png

    image.png

    image.png

    五、封装过后的跨域调用

    1、在main.js引入这个文件,我文件名字叫做“fetch.js”

    image.png

    2、在需要调用的地方,执行如下方法

    1)get方法这样调用:

    this.$fetch(url).then((res) {
    //代码
    });

    2)post方法这样调用:

    this.$post(url).then((res) {
    //代码
    });

    3)patch方法这样调用:

    this.$patch(url).then((res) {
    //代码
    });

    4)put方法这样调用:

    this.$put(url).then((res) {
    //代码
    });

    通过以上配置可以完成axios跨域访问数据问题。


0 +1