vite 中配置代理

在 Vite 中配置代理是为了方便在开发过程中解决跨域问题。

一、配置代理的基本步骤

1. 在 vite.config.js 文件中进行配置。
2. 使用 server.proxy 对象来设置代理规则。

二、具体配置示例

假设我们需要将 /api 开头的请求代理到目标服务器 http://localhost:3000，可以这样配置：

import {
    defineConfig } from 'vite';

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

在这个示例中：

1. '/api' 是匹配请求路径的规则。
2. target 是代理的目标服务器地址。
3. changeOrigin 设置为 true 表示改变请求头中的 Origin 属性，以模拟真实的请求来源。
4. rewrite 函数用于重写请求路径，去除 /api 前缀，以便目标服务器能够正确处理请求。

三、多代理规则配置

如果需要配置多个代理规则，可以在 proxy 对象中添加多个键值对。

四、代理的其他配置选项

1. secure：是否使用安全连接（HTTPS）。
2. ws：是否代理 WebSocket 连接。

五、注意事项

1. 确保代理目标服务器的地址正确。
2. 测试代理配置是否生效，特别是在处理复杂的请求场景时。

通过以上配置，我们可以在 Vite 中轻松地设置代理，解决开发过程中的跨域问题，提高开发效率