Vue前端使用axios统一进行拦截和进行跨域的处理

拦截（下载axios框架）

1. 在根目录下面可以创建一个utils或者其他目录，然后在创建一个统一进行拦截的文件api.js

2.导入相关的axios和router,以及进行弹框处理的Message的element-ui的组件

3.写上你的拦截器

代码如下：

import axios from 'axios'
import { Message } from 'element-ui'
import router from '../router'
//请求拦截器
axios.interceptors.request.use(config=>{
   //如果存在token,请求携带这个token
    if(window.sessionStorage.getItem('tokenStr')){
        config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr');
    }
    return config;
},error => {
    console.log(error);
})



// 响应拦截器
axios.interceptors.response.use(success =>{
    if(success.status && success.status == 200){
        // 401没有登录 403权限禁止
        if(success.data.code == 500 || success.data == 401 || success.data.code ==403){
            Message.error({message:success.data.message});
            return;
        }
        if(success.data.message){
            Message.success({message:success.data.message});
        }
    }
    return success.data;

},error => { 
    // 如果根本没有访问到服务器
    if(error.response.code == 504 || error.response.code == 404){
        Message.error({message:'服务器被吃了o(╯□╰)o'});
    }else if(error.response.code == 403){
        Message.error({message:'权限不足，请联系管理员'});
    }else if(error.response.code==401){
        Message.error({message:'尚未登录，请登录'});
        router.replace("/");
    }else {
        if(error.response.data.message){
            Message.error({message:error.response.data.message});
        }else {
            Message.error({message:'未知错误'})
        }

    }
    return;
})
let base = '';

//传送json数据的post请求
export const postRequest=(url,params)=>{
    return axios({
        method:'post',
        url:`${base}${url}`,
        data:params

    })

}


//携带数据的get请求
export const getRequest=(url,params)=>{
    return axios({
        method:'get',
        url:`${base}${url}`,
        data:params

    })

}
export const deleteRequest=(url,params)=>{
    return axios({
        method:'delete',
        url:`${base}${url}`,
        data: params,
    })
}

export const putRequest=(url,params)=>{
    return axios({
        method:'put',
        url:`${base}${url}`,
        data: params,
    })
}

跨域处理

1.在根目录下面创建一个vue.config.js文件，然后写上如下的内容，相关的注释里面有写

let proxyObj={}

proxyObj['/']={
    // webSocket的代理
    ws:false,

    // 目标地址
    target:'http://localhost:8081',
    // 发送请求头host会被设置为target
    changeOrigin: true,
    //不重写请求地址
    pathRewrite:{
        '^/':'/'
    }
}



module.exports={
    devServer:{
        host:'localhost',
        port:8080,
        proxy:proxyObj
    }

}