【vue3+ts+vite】axios封装、跨域配置

axios请求封装

一、在src下创建http文件夹，并在http文件夹下创建api.ts、request.ts文件

二、文件内容

request.ts

 import axios from 'axios'
import { ElMessage  } from 'element-plus'
// import { getToken } from '@/utils/auth'
 
 
export  const request =(options:any)=> {
  return new Promise((resolve, reject) => {
 
    // create an axios instance
    const service = axios.create({
      // baseURL: process.env.BASE_API, // api 的 base_url
      baseURL: '/api',
      timeout: 80000 // request timeout
    })
 
    // request interceptor
    service.interceptors.request.use(
      (config:any) => {
        let token:string =''//此处换成自己获取回来的token，通常存在在cookie或者store里面
        if (token) {
          // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
          config.headers['X-Token'] = token
       
          config.headers.Authorization =  + token       
         }
        return config
      },
      error => {
        // Do something with request error
        console.log("出错啦", error) // for debug
        Promise.reject(error)
      }
    )
 
    // response interceptor
    service.interceptors.response.use(
       (response:any) => {
        return response.data
      },
      error => {
        console.log('err' + error) // for debug
        if(error.response.status == 403){
          ElMessage.error('错了')
        }else{
          ElMessage.error('服务器请求错误，请稍后再试')
        }
        return Promise.reject(error)
      }
    )
    // 请求处理
    service(options)
      .then((res) => {
        resolve(res)
      })
      .catch((error) => {
        reject(error)
      })
  })
}
 
 
export default request

api.ts

import {request} from './request'
 
// 调用测试
export function getTest(data:any) {
    return request({
      url: 'xxxx',//此处为自己请求地址
      method: 'get',
      data
    })
  }

三、测试

<script setup>
import {getTest} from "@/http/api";
const res = await getTest({name:"DIY_VIEW_INDEX"})
console.log(res)
</script>

<template>
    <h1>hellow</h1>
</template>

<style lang="scss" scoped>
</style>

四、跨域配置

vite.config.ts

export default defineConfig({
  plugins: [
......
  ],
  resolve: {
......
  },
  server: {
    proxy: {
      '/api': {
        target: 'xxxxxxxx', // 实际请求地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },

});