在vue3 中 如何全域配置 axios的请求头？

在Vue 3中，可以通过创建一个插件来全局配置axios的请求头。以下是配置axios全局请求头的基本步骤：

1. 安装axios：
使用npm或yarn将axios添加到项目依赖中。

   npm install axios

或

   yarn add axios

2. 创建一个axios实例并设置请求头：
在src目录下创建一个名为`axios-setup.js`的文件，用于设置全局的axios请求头。

   import axios from 'axios';

   const axiosInstance = axios.create({
     baseURL: 'http://your-api-url', // 设置基础URL
     timeout: 5000, // 请求超时时间
   });

   // 设置全局请求头，例如添加认证Token
   axiosInstance.interceptors.request.use(function (config) {
     // 在发送请求之前做些什么，比如添加Token
     const token = localStorage.getItem('token'); // 假设你使用localStorage存储Token
     if (token) {
       config.headers['Authorization'] = 'Bearer ' + token;
     }
     return config;
   }, function (error) {
     // 对请求错误做些什么
     return Promise.reject(error);
   });

   export default axiosInstance;

3. 在Vue应用中引入并使用axios实例：
在`main.js`或`main.ts`文件中引入axios实例，并将其作为全局的axios使用。

   import { createApp } from 'vue';
   import App from './App.vue';
   import axios from './axios-setup'; // 引入设置好的axios实例

   const app = createApp(App);

   // 将axios实例绑定到Vue原型上，使其在所有组件中可用
   app.config.globalProperties.$axios = axios;

   app.mount('#app');

4. 在组件中使用全局的axios实例：
在任何一个Vue组件中，你可以通过`this.$axios`来访问设置好的axios实例，并发起请求。

   export default {
     name: 'MyComponent',
     mounted() {
       this.$axios.get('/some-endpoint')
         .then(response => {
           // 处理响应数据
         })
         .catch(error => {
           // 处理错误情况
         });
     }
   }

通过以上步骤，你就可以在Vue 3项目中全局配置axios的请求头了。