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

vue.js结合axios实现跨域访问接口

发布时间:2018-08-30 10:52:14作者:wangjian浏览量:835点赞量:0

    一:安装axiso拓展

    npm install axios

    二:main.js里面 配置


    import axios from 'axios'
    Vue.prototype.$ajax = axios//$ajax 定义在vue的使用
    axios.defaults.baseURL = 'https://local.newerp.com'//配置接口入口地址
    axios.defaults.headers.post['Content-Type'] = 'application/json'  //配置header头信息(可不设置)

    三:vue文件进行请求



    this.$ajax({//$ajax 是在main.js里面定义
              method: 'post', //post提交
              url: '/login',//这里拼接api的路径
              data: {
                params:JSON.stringify({
                            username: 1,
                            password: 2
                        })
              }//post时候的值
            }).then(function (response) {
                console.log(response);
            }).catch(function (error) {
                console.log(error)
            })

    这时候出现了报错提示:

    Failed to load https://local.newerp.com/login: Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.


    我的后端配置已经设置了允许跨域,问题出现在vue部分

    解决方法,使用qs

    (1):安装qs拓展

    npm install qs

    (2)在main.js配置中引用qs

    import qs from 'qs'
    // https request 拦截器
    axios.interceptors.request.use(
        config => {
            config.data = qs.stringify(config.data);
            config.headers = {
                'Content-Type':'application/x-www-form-urlencoded'
            };
            return config;
        },
        err => {
            return Promise.reject(err);
        }
    );
    // https response 拦截器
    axios.interceptors.response.use(
        response => {
            if(response.data.errCode == 2) {
                router.push({
                    path: '/',
                    query: {redirect: router.currentRoute.fullPath}  //从哪个页面跳转
                })
            }
            if (response.headers.file_name) {
                return {
                    data: {
                        fileName: decodeURI(response.headers.file_name),
                        data: response.data
                    }
                }
            } else {
                return response;
            }
        },
        error => {
            return Promise.reject(error.response.data)
        }
    );

    再次测试,接口调用成功

    image.png



    总结封装调用接口方法:

    (1)在config目录下新建一个fetch.js文件专门写接口调用方法:

    import Vue from 'vue'
    import axios from 'axios'
    import qs from 'qs'
    axios.defaults.baseURL = 'https://local.newerp.com'//接口入口地址
    axios.defaults.headers.post['Content-Type'] = 'application/json'
    // 
    // 
    // https request 拦截器
    axios.interceptors.request.use(
        config => {
            config.data = qs.stringify(config.data);
            config.headers = {
                'Content-Type':'application/x-www-form-urlencoded'
            };
            return config;
        },
        err => {
            return Promise.reject(err);
        }
    );
    // https response 拦截器
    axios.interceptors.response.use(
        response => {
            if(response.data.errCode == 2) {
                router.push({
                    path: '/',
                    query: {redirect: router.currentRoute.fullPath}  //从哪个页面跳转
                })
            }
            if (response.headers.file_name) {
                return {
                    data: {
                        fileName: decodeURI(response.headers.file_name),
                        data: response.data
                    }
                }
            } else {
                return response;
            }
        },
        error => {
            return Promise.reject(error.response.data)
        }
    );
    //post  方法封装
    export function post(url,data){
    return new Promise((resolve, reject) => {
    axios({//$ajax 是在main.js里面定义的
              method: 'post',
              url: url,//这里拼接api的路径
              data: data//post时候的值
            }).then(function (response) {
                resolve(response.data);
            }).catch(function (error) {
                reject(err)
            })
    })
    }
    //get 方法封装
    export function get(url,data){
    return new Promise((resolve, reject) => {
    axios({//$ajax 是在main.js里面定义的
              method: 'get',
              url: url,//这里拼接api的路径
              params: data//post时候的值
            }).then(function (response) {
                // resolve(response.data);
                console.log(response);
            }).catch(function (error) {
                reject(err)
            })
    })
    }
    //patch 方法封装
    export function patch(url,data){
    return new Promise((resolve, reject) => {
    axios({//$ajax 是在main.js里面定义的
              method: 'patch',
              url: url,//这里拼接api的路径
              data: data//post时候的值
            }).then(function (response) {
                resolve(response.data);
            }).catch(function (error) {
                reject(err)
            })
    })
    }
    //put 方法封装
    export function put(url,data){
    return new Promise((resolve, reject) => {
    axios({//$ajax 是在main.js里面定义的
              method: 'put',
              url: url,//这里拼接api的路径
              data: data//post时候的值
            }).then(function (response) {
                resolve(response.data);
            }).catch(function (error) {
                reject(err)
            })
    })
    }

    (2):在main.js引入

    import {post,get,put,patch} from '../config/fetch'
    Vue.prototype.$post = post;
    Vue.prototype.$get = get;
    Vue.prototype.$patch = patch;
    Vue.prototype.$put = put;

    (3)在vue文件中调用接口

    this.$post('/login',{
                params:JSON.stringify({
                            username: 1,
                            password: 2
                        })
              }).then(res=>{
                  console.log(res);
              })

    目录结构为:

    image.png

上一篇:git在windows下安装

下一篇:vue的基本学习

0 +1