Vue跨域配置和拦截器配置

拦截器：

request.js封装axios拦截器

import axios from axios

const request = axios.create({
          
   
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
          
   
    config.headers[Content-Type] = application/json;charset=utf-8;

    // config.headers[token] = user.token;  // 设置请求头
    return config
}, error => {
          
   
    return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
          
   
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === blob) {
          
   
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === string) {
          
   
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
          
   
        console.log(err + error) // for debug
        return Promise.reject(error)
    }
)


export default request

跨域配置

vue.config.js

// 跨域配置
module.exports = {
          
   
    devServer: {
          
                   //记住，别写错了devServer//设置本地默认端口  选填
        port: 8080,
        proxy: {
          
                    //设置代理，必须填
            /api: {
          
                 //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
                target: http://localhost:9090,     //代理的目标地址
                changeOrigin: true,              //是否设置同源，输入是的
                pathRewrite: {
          
                      //路径重写
                    /api:                      //选择忽略拦截器里面的单词
                }
            }
        }
    }
}