如何通过axios在vue2项目中进行请求转发、跨域？

首先，我们需要在项目中安装 axios 和 http-proxy-middleware 依赖。

npm install axios http-proxy-middleware --save

接下来，我们需要在 Vue 项目中创建一个文件 src/setupProxy.js 来配置请求转发：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
        app.use(
        '/api',
        createProxyMiddleware({
        target: 'http://localhost:3000', // 请求转发的目标地址
        changeOrigin: true, // 开启跨域请求
        pathRewrite: {
        '^/api': '' // 去掉 /api 前缀
        }
    })
    );
};

然后，我们需要在 Vue 项目中创建一个服务接口文件 src/api.js，用于调用转发后的接口：

import axios from 'axios';

const instance = axios.create({
  baseURL: '/api',
  timeout: 5000
});

// 添加请求拦截器
instance.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(response => {
  return response.data;
}
// 异常处理，根据需要添加
// , error => {
//   if (error.response) {
//     const { status, data } = error.response;
//     throw new Error(`HTTP Error ${status} - ${data}`);
//   } else if (error.request) {
//     throw new Error('No response from server');
//   } else {
//     throw new Error(error.message);
//   }
// }
);

// 封装为常用的HTTP方法
export default {
  get(url, params = {}) {
    return instance.get(url, { params });
  },
  post(url, data = {}) {
    return instance.post(url, data);
  },
  put(url, data = {}) {
    return instance.put(url, data);
  },
  delete(url) {
    return instance.delete(url);
  }
};

现在，我们可以在 Vue 组件中使用 api 对象来调用转发后的接口了：

<template>
    <div>
    <button @click="getData">获取数据</button>
    </div>
</template>

<script>
import api from './api';

export default {
methods: {
async getData() {
    try {
            const res = await api.get('/data');
            console.log(res.data);
        } catch (err) {
            console.error(err);
        }
    }
}
};
</script>

最后，我们需要在 Vue 项目的 vue.config.js 中引入 setupProxy.js 文件：

module.exports = {
    devServer: {
        before: require('./src/setupProxy')
    }
};

这样，我们就成功地实现了一个基于 axios 和 http-proxy-middleware 的请求转发示例。