vue使用axios拦截器在header里添加token+设置跨域访问

引入axios

import axios from 'axios'
Vue.prototype.$http = axios;

到此axios就在项目中安装完成了

请求方法：

post方法：
this.$http.post(’/Api/test’, {
phone:this.userphone,
username:this.username
}).then((response) => {
console.log(response);
}).catch((error) =>{
console.log(error);
});

get方法：
this.$http.get(’/Api/test’).then((response) => {
console.log(response);
}).catch((error) =>{
console.log(error);
});
存token
首先，在登录成功后将token存在localStorage中

localStorage.setItem(“token”, response.data.token);//存token
localStorage.getItem(“token”);//取token

1
2
设置拦截器
在main.js里设置拦截器，实现每次请求的header里都有token

axios.defaults.baseURL = '/proxy';//设置路由访问
axios.defaults.timeout = 30000;//设置超时时间
axios.interceptors.request.use(
    config => {
        console.log(config);
        if (localStorage.getItem("token")) {
            config.headers.Authorization = localStorage.getItem("token");
            //把localStorage的token放在Authorization里
        }
        return config;
    },
    function(err) {
        console.log("失败信息" + err);
    }
);