Vite 中如何配置代理？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 Vite 中配置代理可以通过修改 vite.config.js 文件中的 server.proxy 选项来实现。以下是一个简单的配置示例：

// www.javascriptcn.com code example
// vite.config.js
import { defineConfig } from 'vite';

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

在这个示例中，所有以 /api 开头的请求都会被代理到 http://jsonplaceholder.typicode.com，并且 changeOrigin 设置为 true 以确保请求头中的 Host 字段被正确修改。rewrite 函数用于重写请求路径，移除 /api 前缀。

本题详细解读

1. 代理配置的作用

在开发过程中，前端应用通常需要与后端 API 进行通信。由于前端和后端可能运行在不同的端口或域名下，直接请求可能会遇到跨域问题。通过配置代理，前端可以将请求转发到后端服务器，从而避免跨域问题。

2. `server.proxy` 选项

server.proxy 是 Vite 配置中的一个选项，用于定义代理规则。它是一个对象，键是请求路径的前缀，值是一个对象，包含代理的目标地址和其他配置项。

3. 常用配置项

target: 代理的目标地址，即后端服务器的地址。
changeOrigin: 是否修改请求头中的 Host 字段。设置为 true 时，Host 字段会被修改为目标地址的域名。
rewrite: 一个函数，用于重写请求路径。可以通过这个函数移除或替换路径中的某些部分。

4. 示例解析

在推荐答案的示例中：

/api 是请求路径的前缀。
target 设置为 http://jsonplaceholder.typicode.com，表示所有以 /api 开头的请求都会被代理到这个地址。
changeOrigin 设置为 true，确保请求头中的 Host 字段被正确修改。
rewrite 函数用于移除 /api 前缀，使得实际请求的路径不包含 /api。

5. 其他配置项

除了上述常用配置项外，server.proxy 还支持其他配置项，如 secure、ws 等，可以根据具体需求进行配置。

// www.javascriptcn.com code example
server: {
  proxy: {
    '/api': {
      target: 'http://jsonplaceholder.typicode.com',
      changeOrigin: true,
      secure: false, // 如果目标地址是 HTTPS，可以设置为 false 以忽略证书验证
      ws: true // 如果需要代理 WebSocket 请求，可以设置为 true
    }
  }
}

通过这些配置，Vite 可以灵活地处理各种代理需求，帮助开发者在开发过程中避免跨域问题。

Vite 中如何配置代理？