Vue3+viet+Ts+mock遇到Access to XMLHttpRequest跨域问题

Vue3中使用mock居然跨域

在练习vue3中使用到mock模拟数据居然遇到跨域,我看其它大佬使用时都没有跨域问题,不知道我写的项目为什么会这样,但是我的解决方案还是配置跨域代理.
Access to XMLHttpRequest at ‘http://localhost:5173/api/routes’ from origin ‘http://127.0.0.1:5173’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

解决方案

在vite.config.ts中配置目标地址(注意:webpack和vite的写法不一致)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // mock服务
    viteMockServe({
      supportTs: false,
      logger: false,
      mockPath: "./src/mock/",
    }),
  ],
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8080/', //目标url
        changeOrigin: true, //支持跨域
        rewrite: (path) => path.replace(/^\/api/, ""),
        //重写路径,替换/api
      }
    }
  }
})

在axios基地址中添加/api

import axios from 'axios'

// axios对象
const service = axios.create({
    // axios请求基础URL
    baseURL: "/api",
    timeout: 5000
})

// 测试用Hello World
export const TestApi = () => service({ url: '/test', method: 'get' })

/**
 * 动态路由接口
 */
export const GetDynamicRoutes = () => service({ url: '/routes', method: 'get' })