前端vite解决多个跨域问题proxy

Vite 是一个现代化的前端构建工具，它利用了 ES6 的 `import` 语法来按需加载模块，从而提升了开发体验和构建速度。在开发过程中，我们经常需要解决前端跨域的问题，Vite 通过配置代理（proxy）功能可以比较方便地解决这一问题。

Vite 通过配置文件 `vite.config.js` 中的 `server` 字段来支持代理功能。在这个字段中，你可以指定一组代理规则，以将特定的 API 请求代理到不同的服务器上，从而绕过浏览器的同源策略限制。配置代理的基本步骤如下：

1. 在 `vite.config.js` 文件中引入 `http-proxy-middleware` 这个 npm 包，因为 Vite 内部使用了这个中间件来实现代理功能。
2. 设置 `server` 字段，并在 `proxy` 子字段中定义代理规则。例如，如果你的前端应用运行在 `http://localhost:3000`，而后端服务运行在 `http://localhost:4000`，你可以配置如下代理规则：

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

export default defineConfig({
  // ...其他配置...
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000', // 后端服务地址
        changeOrigin: true, // 控制服务器接收到的请求头中host字段的值
        rewrite: path => path.replace(/^\/api/, '') // 重写路径
      },
      // 可以继续配置多个代理规则
    }
  }
});

3. 在上面的配置中，`'/api'` 表示所有以 `/api` 开头的请求都会被代理到 `http://localhost:4000`。`changeOrigin` 设置为 `true` 表示将请求的 host 改为 `target` 的值。`rewrite` 函数用于重写路径，避免请求路径错误。

4. 当你的 Vite 项目运行起来后，发送到前端服务器的请求如 `/api/users` 将被代理到 `http://localhost:4000/api/users`。

使用代理的方式可以有效地解决开发时的跨域问题，让前端应用能够顺利地与后端服务进行数据交互。