vue3 axios设置反向代理

在Vue 3中使用axios发送请求并设置反向代理，你可以按照以下步骤进行操作：

1. 首先，安装axios和http-proxy-middleware。在终端或命令行中执行以下命令：

   npm install axios http-proxy-middleware --save

2. 在你的Vue项目中创建一个名为`vue.config.js`的文件（如果已存在，请跳过此步骤）。

3. 在`vue.config.js`文件中添加以下代码：

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

   module.exports = {
     devServer: {
       before: function(app) {
         app.use(
           '/api',
           createProxyMiddleware({
             target: 'http://your-api-url.com', // 设置你的代理目标地址
             changeOrigin: true,
             pathRewrite: {
               '^/api': '' // 如果你的API路径有前缀，这里需要进行重写
             }
           })
         );
       }
     }
   };

4. 根据你的实际情况，将`target`属性的值替换为你想要代理的API的URL。

5. 修改你的代码以使用axios发送请求。例如，在Vue组件中，可以这样使用：

   import axios from 'axios';

   export default {
     methods: {
       fetchData() {
         axios.get('/api/some-endpoint').then(response => {
           // 处理返回的数据
         }).catch(error => {
           // 处理错误
         });
       }
     }
   };

现在，当你使用axios发送请求时，它会将请求转发到你设置的目标代理地址上。请确保将`/api`作为你的API路径前缀使用，以便代理中间件能够正确地转发请求。