7.怎么配置一个axios来拦截前后端请求

首先创建一个axios.js文件

导入我们所需要的依赖

import axios from "axios"; import Element from 'element-ui' import router from "./router";

设置请求头和它的类型和地址

注意先注释这个url,还没有解决跨域问题,不然会出现跨域

// axios.defaults.baseURL = "http://localhost:8081" const request = axios.create({     timeout: 5000,     headers: { //请求头的格式要求为json         'Content-Type': 'application/json; charset=utf-8'     } }) request.interceptors.request.use(config => { //将localStorage中的token放入请求头     config.headers['Authorization'] = localStorage.getItem("token") // 请求头带上token     return config })

设置后端返回给前端数据的处理方式

//就是当后端返回给前端code的值来回馈不同的效果 request.interceptors.response.use(response => {         let res = response.data;         console.log("response")         console.log(res)         if (res.code === 200) {             return response         } else {             Element.Message.error(res.msg? res.msg : '系统异常！', {duration: 3 * 1000})             return Promise.reject(response.data.msg)         }     },     error => {         console.log(error)         if(error.response.data) {             error.message = error.response.data.msg         }         if(error.response.status === 401) {             router.push("/login")         }         Element.Message.error(error.message, {duration: 3 * 1000})         return Promise.reject(error)     } ) 

将他暴露出来

export default request

然后在main.js中修改

import axios from 'axios' Vue.prototype.$axios = axios //

修改为

import request from "./axios"; Vue.prototype.$axios = request 

就可以了