如何在 Vue3 中使用 Axios 处理跨域请求？

在 Vue3 中，使用 Axios 处理跨域请求通常需要配合 `axios` 插件和配置。以下是基本步骤：

1. 首先，在项目中安装 Axios 和 Vue-Axios 插件：

   npm install axios vue-axios

2. 然后，在 `main.js` 或 Vue 应用的入口文件中，引入并使用 Axios 插件：

   import { createApp } from 'vue'
   import axios from 'axios'
   import VueAxios from 'vue-axios'

   createApp(App).use(VueAxios, axios)
   // 如果你想设置默认的全局配置，可以这样做：
   axios.defaults.baseURL = 'https://api.example.com'
   axios.defaults.withCredentials = true
   axios.defaults.headers.common['X-Custom-Header'] = 'value'

3. 在组件中，可以直接注入 `axios` 实例进行请求：

   <script setup>
   import { ref } from 'vue'
   const user = ref({ name: '' });

   async function fetchData() {
     try {
       await axios.get('/users/me')
         .then(response => (user.value = response.data))
         .catch(error => console.error('Error fetching data', error));
     } catch (error) {
       if (process.env.NODE_ENV !== 'production') {
         console.error('An error occurred while fetching data:', error);
       }
     }
   }
   </script>

这样，无论你的 API 地址是否跨域，Vue-Axios 都会处理相应的 CORS 请求头。