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

Posted 2021-12-29 houzhicongone

文章目录

• • 拦截（下载axios框架）
  • • 1. 在根目录下面可以创建一个utils或者其他目录，然后在创建一个统一进行拦截的文件api.js
    • 2.导入相关的axios和router,以及进行弹框处理的Message的element-ui的组件
    • 3.写上你的拦截器
  • 跨域处理
  • • 1.在根目录下面创建一个vue.config.js文件，然后写上如下的内容，相关的注释里面有写

拦截（下载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