前端react/vue跨域拦截 axios

前端react/vue跨域拦截   axios

first step

import  axios from 'axios'

inport  qs from 'qs'

const server = axios.create({

    timeout:5000,

    headers:{'Content-Type':'application/x-www-form-urlencode'}

})

server.interceptors.request.use(config=>{

    if(config.method==="post"){

        config.data=qs.stringfy({

            ...config.data

})

return config

},error=>{

console.log(error,"----------------")

Promise.reject(error)

}

})

//response拦截器

server.interceptors.response.use({

        response=>{

    const res = response.data;

message.destory();

if(res.code===1111){

    message.destory();

message.error(res.msg);

setTimeout(()=>{

window.location.href = '/login';

return ;

},100)

}

if(res.code===200){

    return response.data;

}else{

    message.destroy();

    meseage.error(res.msg);

    return Promise.reject('error')

    }

},error =>{

    return Promise.reject(error)

})

export default server //将封装的server暴露出去

//使用方法

/***

*

*统一定义接口，有利于维护

*

**/

const BASEURL = ' http://localhost:3000/ ' ;

const HISTORY = ' https://www.jinxxxxxxx '

const URL = {

userLogin:BASEURL + 'user/login' , //用户登陆

forgetPwd:BASEURL + 'user/resetPwd' , //忘记密码

}

export default URL

//登陆---------案例 api.js

import server from 'server.js'

export function login ( data ) {

return server ({

url: url . userLogin ,

method: 'post' ,

dataType: "json" ,

data: data

});

}

async submitLogin () {

message . destroy ();

let { userName , password , appId } = { ... this . state };

if ( ! userName ) return message . error ( "登录账号不能为空" , 1 );

if ( ! password ) return message . error ( "登录密码不能为空" , 1 );

if ( password . length < 6 ) return message . error ( "登录密码长度最少为6位" , 1 );

let logindate = await login ({ userName , password });

if ( logindate . code === 200 ){

// localStorage.setItem( 'uid',logindate.data.uid);

// localStorage.setItem( 'uname',logindate.data.uname);

window . location = '/' ;

    }

}