vue前端配置两个代理，拦截器要如何配置

在Vue项目中配置两个代理，通常是在`vue.config.js`文件中通过配置`devServer`的`proxy`属性来实现的。拦截器则是在前端项目中通过设置请求拦截和响应拦截来处理请求和响应的逻辑。下面是如何配置两个代理以及如何设置拦截器的介绍：

1. 配置两个代理：
在`vue.config.js`文件中，可以通过设置`devServer`的`proxy`属性来配置代理。每个代理是一个对象，包含`target`、`changeOrigin`等属性。你可以为两个不同的API服务器配置两个代理规则。

   module.exports = {
     devServer: {
       proxy: {
         '/api1': {
           target: 'http://localhost:3000', // 目标API地址1
           changeOrigin: true,
           pathRewrite: {'^/api1': ''}
         },
         '/api2': {
           target: 'http://localhost:4000', // 目标API地址2
           changeOrigin: true,
           pathRewrite: {'^/api2': ''}
         }
       }
     }
   }

在上面的配置中，`/api1`和`/api2`是代理的路径前缀，当请求的URL以这两个前缀开始时，会分别转发到`http://localhost:3000`和`http://localhost:4000`。

2. 配置拦截器：
拦截器通常在前端项目中通过请求库（如axios）来设置。在Vue中，通常是在axios实例中添加请求拦截器和响应拦截器。

   import axios from 'axios';

   // 创建axios实例
   const service = axios.create({
     baseURL: process.env.VUE_APP_BASE_API, // API的base_url
     timeout: 5000 // 请求超时时间
   });

   // 请求拦截器
   service.interceptors.request.use(
     config => {
       // 在这里可以设置请求头，比如添加token
       if (localStorage.getItem('token')) {
         config.headers['Authorization'] = localStorage.getItem('token');
       }
       return config;
     },
     error => {
       // 请求错误处理
       console.error('request error:', error);
       return Promise.reject(error);
     }
   );

   // 响应拦截器
   service.interceptors.response.use(
     response => {
       const res = response.data;
       // 根据状态码处理结果，比如200为成功，可以在这里进行处理
       if (res.code !== 200) {
         // 可以在这里处理一些错误情况
         console.error('response error:', res.message);
         return Promise.reject('error');
       } else {
         return res;
       }
     },
     error => {
       // 响应错误处理
       console.error('response error:', error);
       return Promise.reject(error);
     }
   );

   export default service;