vue2解决跨域问题以及获取token问题集结

我们在使用axios有时候会出现以下报错：

解决方法：如下： 

在使用axios请求后台数据的时候，会不断的一直调用axios导致代码量会很大，可以使用一个组件进行封装，每次调用使用即可，在src目录下面新建一个http文件夹，文件夹里面放入一个index.js

里面输入：

里面加入拦截器请求token值，前提是要讲token值存进去才能去到（token就代表身份令牌一样，）

import axios from 'axios'
//      用函数调用请求配置
export default function (config) {
    // 创建axios实例
    const instance = axios.create({
        // 后台链接
        baseURL: '/api',
    });
    // 添加请求拦截器
    instance.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        // 注意在登录页面和注册页面的时候是不需要携带token的
        if (config.url == 'login' || config.url == 'register') {
            return config;
        } else {
            // 表示否则请求头的token值就取到保存的token值
            config.headers['token'] = window.sessionStorage.getItem('token_')
            return config;
        }
        return config;
    }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    });

    // 添加响应拦截器
    instance.interceptors.response.use(function (response) {
        // 对响应数据做点什么,这里表示直接拿到data数据
        return response.data;
    }, function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
    });
    // 使用axios调用这个配置
    return instance(config);
}

 上述方法中的后台链接是在vue.config.js文件中配置跨域配置的默认端口连接，（封装说完后下面会说怎么配置vue.config.js文件以及解决跨域）

然后在要使用axios请求的组件当中引用：

然后使用

 然后来解决跨域的问题，在src的根目录下面新建一个文件vue.config.js里面输入：

module.exports = {
    // 搭建服务器用来解决跨域
    devServer: {
        proxy: {
            // 转值为/api
            '/api': {
                // 后台默认的端口地址
                target: ' http://localhost:3000 ',
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

这样子再次运行项目就没有问题了