Vue3 第三章 项目优化axios封装和跨域

1. axios 封装
   新建request.js文件

   import axios  from "axios";
   const baseURL='http://127.0.0.1:8080';
   const instance = axios.create({baseURL});
   //响应拦截器
   instance.interceptors.response.use(
       result=>{
           return Promise.resolve(result.data)
       },
       error => {
           //异步状态转化为失败状态
           return Promise.reject(error);
       }
   )
   export  default instance;
   

   新建接口文件如 api.js

   import request from '@/util/request'
   //菜单列表
   export function getIndex(){
       return request({
           url:'/fast/api/getApiList',
           method:'get'
       })
   }
   

   在vue中使用

   <script setup>
   import {getIndex} from "@/api";
   import {ref} from "vue";
   const  data=ref();
   function getList(){
     getIndex().then(res=>{
       data.value=res
     })
   }
   getList()
   script>
   <template>
     {{data}}
   template>
   <style scoped>
   style>
   

2. 跨域解决
   修改request.js文件

import axios  from "axios";
//代理地址
const baseURL='/dev-api';
const instance = axios.create({baseURL});
//响应拦截器
instance.interceptors.response.use(
    result=>{
        return Promise.resolve(result.data)
    },
    error => {
        //异步状态转化为失败状态
        return Promise.reject(error);
    }
)
export  default instance;

修改 vite.config.js文件

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // 跨域代理配置  将地址 http://localhost:88/api 转换为 http://localhost:8080/test
  server: {
    port: 88,
    host: true,
    open: true,
    proxy: {  //1. 将本/api 地址转换为  http://localhost:8080/api
      '/dev-api': {
        target: 'http://localhost:8080', //服务器接口地址
        changeOrigin: true,
        //2.将 /api 路径替换为 /test
        rewrite: (p) => p.replace(/^\/dev-api/, '/test')
      }
    }
  },
})