vue3.0+axios 跨域+封装

封装：

　目录结构：src/utils/request.js， 没有就自己建一个

import axios from 'axios'
import { Message } from 'element-ui'

// create an axios instance
const service = axios.create({
  baseURL: '/gateway', //添加于请求路径前
  timeout: 5000 // request timeout
})

service.interceptors.request.use( //请求拦截
  config => {
    const token = window.localStorage.getItem('token')
    if (token) {
      config.headers['autel-token'] = token  //在请求之前，像 headers 里面携带token
    }
    // Do something before request is sent
    if (
      config.applicationType !== 'JSON' &&
      config.url.indexOf('community-attachment') === -1
    ) {  //对 post 请求 或 put 请求的数据做 JSON 转换
      if (config.method === 'post' || config.method === 'put') {
        let _data = ''
        for (const it in config.data) {
          const value = config.data[it] === null ? '' : config.data[it]
          _data +=
            encodeURIComponent(it) + '=' + encodeURIComponent(value) + '&'
        }
        config.data = _data
      }
    }
    return config
  },
  error => {
    // Do something with request error
    return Promise.reject(error)
  }
)

service.interceptors.response.use( //对请求回来的数据做统一错误处理
  response => {
    const res = response
    if (res.data.code !== 1) {
      Message({
        message: res.data.message || '不明错误',
        type: 'error',
        duration: 5 * 1000
      })
    }
    // if the custom code is not 20000, it is judged as an error.
    if (res.status !== 200) {
      Message({
        message: res.message || '不明错误',
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

　　

　　

跨域， 在 vue.config.js　里配置

module.exports = {

devServer : {
    proxy: {
      '/gateway': { //由于我们上面在请求头里有添加 gatwat 所以能拦截
        target: 'http://autel-cloud-gateway.dev.com', // 接口域名
        // secure: false,   // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/gateway': ''
        }
      }
    },
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src') //vue 代码里出现 @ ，表示 src 目录
      }
    }
  }
}
}

　　

　使用

　　　　src/api/menu.js

import request from '@/utils/request'

//添加菜单
export function addOrCompileMenu(data) {
  return request({
    url: '/api/admin/menu/saveMenu',
    method: 'post',
    applicationType: 'JSON',  //这一段表示，是post 请求，就将 请求参数转换成 JSON 格式
    data
  })
}

　　src/views/menu.vue

import { getMenuList } from '@/api/menu'
methods: {
   getMenuList({}).then(res => {
        if (res.status === 200) {
          this.list = res.data.data.menuVoList
        }
      })
}