VUE3使用axios进行前后端数据交互以及跨域问题解决

1.Vue项目中引入axios

npm install axios

2.在man.js文件中引入axios

import axios from "axios"

//将axios设置为全局 在.vue文件中使用不需要重新导入
createApp(App).config.globalProperties.$axios=axios;

3.在vite.config.js文件中设置代理

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

// https://vitejs.dev/config/
export default defineConfig ({
  plugins: [vue()],

   server: {
     // cors:true,
       proxy: {
           '/api': {
               target: 'http://localhost:8080/',
               changeOrigin: true,
               rewrite:(path)=>path.replace(/^\/api/,'')
           }
       }
   }

})