使用Vite 构建vue项目时如何配置跨域在使用 Vite 构建项目时，跨域问题可以通过配置开发服务器的代理来解决。Vi

在使用 Vite 构建项目时，跨域问题可以通过配置开发服务器的代理来解决。Vite 的跨域配置与 Vue CLI 类似，但使用的配置方式是 vite.config.js 文件中的 server.proxy 配置项。

步骤：在 Vite 中配置跨域代理

创建或修改 vite.config.js 文件

Vite 的配置文件是 vite.config.js，在这个文件中，你可以通过 server.proxy 来设置开发服务器的代理。代理将会把请求转发到指定的目标服务器，从而解决跨域问题。

示例：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',   // 后端 API 地址
        changeOrigin: true,                // 改变请求源，避免 CORS 问题
        secure: false,                     // 如果是https接口，需要配置为false
        rewrite: (path) => path.replace(/^\/api/, ''),  // 重写路径，去掉/api前缀
      },
    },
  },
});

解释配置项：
- server.proxy: 这是配置代理的部分。
- /api: 这里的 /api 是前端请求的路径前缀，可以根据需求自定义，比如如果前端请求 /api/*，这些请求会被代理到目标服务器。
- target: 后端的服务器地址（例如 http://localhost:5000），即请求要代理到的目标服务器。
- changeOrigin: 设置为 true，表示将请求头中的 Origin 字段改为目标服务器的地址，避免 CORS 问题。
- secure: 如果目标服务器是 https 协议且没有合法证书，可以设置为 false，否则保持默认 true。
- rewrite: 可以用来重写请求路径，去掉前缀 /api，让后端接收到 / 路径的请求。
运行项目

配置完成后，使用以下命令启动 Vite 开发服务器：
```
npm run dev
```
所有以 /api 开头的请求将被代理到 http://localhost:5000，并且请求路径会被 rewrite 转换。

4. 复杂的代理配置

你可以根据项目的需求，配置多个代理规则，也可以处理路径、请求头等更复杂的需求。

多个代理规则：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
      '/auth': {
        target: 'http://localhost:4000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/auth/, ''),
      },
    },
  },
});

修改请求头：

如果需要在代理中修改请求头，可以使用 configure 选项：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        configure: (proxy) => {
          // 可以配置代理时的其他选项，例如请求头
          proxy.on('proxyReq', (proxyReq) => {
            proxyReq.setHeader('Authorization', 'Bearer your-token');
          });
        },
      },
    },
  },
});

5. 总结

在 Vite 中，跨域问题通过在 vite.config.js 中配置 server.proxy 来解决。
使用 server.proxy 可以将特定路径（如 /api）的请求代理到后端服务器，从而避免浏览器的跨域限制。
配置选项包括 target、changeOrigin、rewrite 和 secure 等，可以根据实际需求调整。

注意事项：

代理只在开发环境中生效，生产环境部署时通常需要通过后端配置 CORS 或使用 Nginx 等服务器进行代理。
Vite 默认使用了快速的 esbuild 打包工具，配置代理后，可以直接在本地开发时模拟真实的后端 API。