请求拦截器与响应拦截器

import axios from 'axios'
// 创建axios实例
const service = axios.create({
    baseURL:"https://t.culture.xinxin.com",
    timeout:5000,
})

 请求拦截器：发送请求的时候，携带一些信息

// 请求拦截器
service.interceptors.request.use(config =>{
    const token=localStorage.getItem('token')
    if(token){
        // 网站设置了​Access-control-allow-origin: *，并没有实际危害，因为并不能跨域读取私密数据（登录后才可见数据）
        // 当跨域请求需要携带cookie时，请求头中需要设置Access-Control-Allow-Credentials:true。
        config.headers={'Access-Control-Allow-Origin':'*','Access-Control-Allow-Credentials': 'true'};
        // contentType指定类型的数据格式，axios默认的请求头content-type类型是’application/json;charset=utf-8’.application/json数据会以json字符串的形式发送到后端；
        config.headers['contentType'] = "application/json; charset=utf-8";
        // 发送给服务器的格式在接收的时候要一致
        config.headers['dataType'] = "json";
         // 每个请求携带自定义 token 请根据实际情况自行修改
        config.headers= {Authorization:'Bearer ' + token};

    }
    return config
})

响应拦截器：接收到数据的时候，进行数据过滤、对状态码判断，进行对应的操作

// 响应拦截器
service.interceptors.response.use(res =>{
    if(res.data.errcode === 4009){
        console.log('登录过期，请重新登录')
        Notification.error({ title: '系统提示', message:'登录过期，请重新登录',duration: 4000});
        localStorage.removeItem('token');
        localStorage.removeItem('ms_username');
        localStorage.removeItem('ms_userID');
        window.location.reload();
        setTimeout(() => {
            router.push({ path: '/login'});
        },1000)
        // window.location.href = '/login'
        return;
    }
    return res.data
},err=>{
    return Promise.reject(err)
}
)

前端项目中将Token存储在请求头(Authorization)请参照

前端项目中将Token存储在请求头(Authorization)_贝塔iii的博客-CSDN博客_前端把token加到请求头