Vite 的 server.proxy 配置项有什么作用？

推荐答案

Vite 的 server.proxy 配置项用于配置开发服务器中的代理规则。通过代理，可以将特定的请求转发到另一个服务器，通常用于解决开发环境中的跨域问题，或者将请求转发到后端 API 服务器。

本题详细解读

1. 什么是 server.proxy？

server.proxy 是 Vite 配置中的一个选项，用于在开发服务器中设置代理规则。它允许你将特定的请求路径转发到另一个服务器，从而避免跨域问题或直接访问后端服务。

2. 如何使用 server.proxy？

在 vite.config.js 或 vite.config.ts 中，你可以通过 server.proxy 配置项来定义代理规则。以下是一个简单的示例：

// www.javascriptcn.com code example
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

在这个示例中，所有以 /api 开头的请求都会被代理到 http://localhost:3000，并且 changeOrigin 选项设置为 true，表示请求头中的 Origin 字段会被修改为目标服务器的地址。rewrite 函数用于重写请求路径，移除 /api 前缀。

3. server.proxy 的常见配置选项

• target: 目标服务器的地址。
• changeOrigin: 是否修改请求头中的 Origin 字段，通常设置为 true 以解决跨域问题。
• rewrite: 一个函数，用于重写请求路径。
• secure: 如果目标服务器使用 HTTPS，可以设置为 false 来禁用 SSL 证书验证。
• ws: 是否代理 WebSocket 请求。

4. 适用场景

• 跨域请求: 在开发环境中，前端应用和后端 API 可能运行在不同的端口或域名下，使用代理可以避免跨域问题。
• API 请求转发: 将前端请求转发到后端服务器，方便开发调试。
• 模拟数据: 在开发阶段，可以使用代理将请求转发到本地模拟数据服务器，而不需要依赖真实的后端服务。

5. 注意事项

• 仅适用于开发环境: server.proxy 仅在开发服务器中生效，生产环境中需要配置反向代理（如 Nginx）来实现类似功能。
• 路径匹配: 代理规则是基于路径匹配的，确保路径配置正确，避免不必要的请求被代理。

通过合理配置 server.proxy，可以大大简化开发环境中的请求处理，提升开发效率。