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

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

没啥好说的，先安装

首先安装axios

cnpm   install --save axios

引入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加在header里面之后，报跨域错误
Request header field content-type is not allowed by Aceess-Control-Allow-Header in preflight response
故先设置代理，写在vue.config.js里

	configureWebpack: {
        devServer: {
            proxy: {
                '/proxy': {
                    target: 'http://xxx.cn/index.php/',
                    changeOrigin: true,//改变源
                    ws: true,//跨域
                    pathRewrite: {
                        '^/proxy':''
                    }
                }
            }
        }
    }

存token

首先，在登录成功后将token存在localStorage中

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

设置拦截器

在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);
        }
    );