vue3配置代理跨域vite

要在 Vue3 中配置代理跨域，需要使用 Vite 构建工具。以下是一个简单的示例，展示了如何在 Vite 中配置代理跨域：

1. 安装依赖

首先，需要安装 `http-proxy-middleware` 依赖：

npm install http-proxy-middleware --save-dev

2. 配置代理

在 `vite.config.js` 中，可以使用 `createProxyMiddleware` 函数来配置代理：

import { createProxyMiddleware } from 'http-proxy-middleware';

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  // other options
}

上述代码中，我们将以 `/api` 开头的请求代理到 `http://localhost:3000`，并使用 `changeOrigin` 选项来修改请求头中的 `Host` 字段，确保代理成功。我们还使用了 `pathRewrite` 选项来删除 `/api` 前缀，以便在目标服务器上能够正确处理请求。

3. 启动项目

现在，可以启动项目并测试代理是否工作正常：

npm run dev

如果一切正常，你应该能够在浏览器中访问 `http://localhost:3000/api`，并获得来自代理服务器的响应。