1.vue3+vite开发中axios使用及跨域问题解决

一、跨域问题解决

 1.基于vite+vue3配置时，在vite.congig.js文件server项目中添加 proxy代理

  文件名：vite.congig.js

  server: {    open: true,//启动项目自动弹出浏览器    port: '3000',    proxy: {      '/api': {        target: 'http://localhost:8000/api/',        changeOrigin: true,        rewrite: (path) => path.replace(/^\/api/, '') // 不可以省略rewrite      }    }

2.axios封装时设置基本路径baseURL

  const instance = axios.create({  baseURL:  '/api', // api的base_url import.meta.env.VUE_APP_BASE_API 也可以直接写  timeout: 10000, // 请求超时时间  headers: {    'Content-Type': 'application/json;charset=UTF-8'  }});

二、provide/inject 实现axios 全区使用

  在main.js中provide

   app.provide('axios', axios)

  在组件内获取

  import { inject } from 'vue'

  const axios = inject('axios')

  axios.post()

具体代码如下：

1.axios封装http.js

import axios,{AxiosRequestConfig,AxiosResponse} from 'axios'import { ElLoading } from 'element-plus';let loading:any;const startLoading = ()=>{  interface Options {    lock: boolean;    text: string;    background: string;  };  const options:Options = {    lock: true,    text: "加载中...",    background: "rgba(0,0,0,0.7)"  }  loading = ElLoading.service(options)}const endLoading = ()=>{  loading.close()}const instance = axios.create({  baseURL:  '/api', // api的base_url import.meta.env.VUE_APP_BASE_API 也可以直接写  timeout: 10000, // 请求超时时间  headers: {    'Content-Type': 'application/json;charset=UTF-8'  }});// 请求拦截instance.interceptors.request.use((config:AxiosRequestConfig) =>{  startLoading(); //  开始loading  return config})// 响应拦截instance.interceptors.response.use((response:AxiosResponse) =>{  endLoading(); //  结束loading  return response;},error =>{  return Promise.reject(error)  // 错误提醒})export default axios

2.全区应用main.js

// 加载 axiosimport axios from './http'const app = createApp(App)// 全局挂载axiosapp.provide('axios', axios)

3.组件中使用

 import { inject } from 'vue'  const axios = inject('axios')  // @ts-ignore axios.post('/api/users/register', props.registerUser)

来源地址：https://blog.csdn.net/lap2004/article/details/132310639