Vite 如何配置 proxy 代理？

9 个月前提问

7 个月前修改

浏览次数151次

3个答案

在 Vite 中配置代理是一个简单的过程，可以通过修改 Vite 项目中的 vite.config.js 文件来实现。在 Vite 中，代理的配置是通过服务器（server）配置的 proxy 选项来完成的。下面是一个配置代理的基本例子：

首先，打开你的 Vite 项目根目录下的 vite.config.js 文件。

然后，在配置对象中添加 server 部分，并在其中配置 proxy 选项：

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

export default defineConfig({
  server: {
    proxy: {
      // 使用字符串简写写法
      // 所有以 '/api' 开头的请求都会被代理到 http://example.com
      '/api': 'http://example.com',

      // 也可以提供详细的配置
      '/another-api': {
        target: 'http://another-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/another-api/, '')
      }
    }
  }
});

在上面的配置中：

/api: 是一个简单的代理配置，所有发往 /api 的请求都会被转发到 http://example.com。
/another-api: 是一个更详细的配置，不仅包括目标服务器的地址，还指定了 changeOrigin 为 true（这通常对于主机名检查是必要的），以及一个 rewrite 函数，该函数将请求路径中的 /another-api 替换为空字符串，这样转发到目标服务器时就不会包含原始的代理路径。

在代理配置中，你可以设置多个不同的代理规则，根据你的需求进行匹配和转发。

请记住，每当你修改了 vite.config.js 文件后，都需要重启 Vite 开发服务器以便配置生效。在 Vite 中，配置 proxy 代理主要是在项目的 vite.config.js 配置文件中进行设置。通过配置 server.proxy 选项，可以指定要代理的 API 请求。Vite 的代理功能基于 http-proxy，可以轻松地将某些 API 请求代理到其他服务器。

以下是一个 vite.config.js 中配置 proxy 代理的例子：

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

export default defineConfig({
  server: {
    proxy: {
      // 使用字符串简写形式
      '/api': 'http://localhost:3000', // 所有访问 /api 的请求都会被代理到 http://localhost:3000/api
      
      // 使用对象的形式，提供更多的配置选项
      '/api2': {
        target: 'http://localhost:3001', // 目标服务器
        changeOrigin: true, // 控制服务器收到的请求头中 host 字段的值
        rewrite: (path) => path.replace(/^\/api2/, ''), // 重写请求路径，去掉 /api2
        // 可以在这里添加更多的 http-proxy 选项
      },
      
      // 添加其他路径的代理规则
      '/other-path': {
        target: 'http://other-server.com',
        changeOrigin: true,
        // 其他配置...
      }
    }
  }
});

在上面的例子中，我们配置了三个代理规则：

当请求路径以 /api 开始时，请求将被代理到 http://localhost:3000 上，并且请求路径会保持不变，例如 /api/user 会代理到 http://localhost:3000/api/user。
对于以 /api2 开始的请求，这些请求也会被代理到另一个目标服务器 http://localhost:3001，但是因为使用了 rewrite 配置，所以请求路径中的 /api2 会被去掉，例如 /api2/user 会被代理到 http://localhost:3001/user。
最后一个代理规则是一个其他路径的代理，将 /other-path 开头的请求代理到 http://other-server.com。

通过以上配置，你可以根据你的实际开发需求，配置合适的代理规则，以实现本地开发时对后端 API 的代理请求。这样可以解决本地开发时遇到的跨域问题，并可以模拟在生产环境下前后端分离的部署方式。

2024年6月29日 12:07 回复

首先，打开你的 Vite 项目根目录下的 vite.config.js 文件。

然后，在配置对象中添加 server 部分，并在其中配置 proxy 选项：

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

export default defineConfig({
  server: {
    proxy: {
      // 使用字符串简写写法
      // 所有以 '/api' 开头的请求都会被代理到 http://example.com
      '/api': 'http://example.com',

      // 也可以提供详细的配置
      '/another-api': {
        target: 'http://another-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/another-api/, '')
      }
    }
  }
});

在上面的配置中：

/api: 是一个简单的代理配置，所有发往 /api 的请求都会被转发到 http://example.com。
/another-api: 是一个更详细的配置，不仅包括目标服务器的地址，还指定了 changeOrigin 为 true（这通常对于主机名检查是必要的），以及一个 rewrite 函数，该函数将请求路径中的 /another-api 替换为空字符串，这样转发到目标服务器时就不会包含原始的代理路径。

在代理配置中，你可以设置多个不同的代理规则，根据你的需求进行匹配和转发。

请记住，每当你修改了 vite.config.js 文件后，都需要重启 Vite 开发服务器以便配置生效。

2024年6月29日 12:07 回复

在 Vite 中，配置 proxy 代理主要是在项目的 vite.config.js 配置文件中进行设置。通过配置 server.proxy 选项，可以指定要代理的 API 请求。Vite 的代理功能基于 http-proxy，可以轻松地将某些 API 请求代理到其他服务器。

以下是一个 vite.config.js 中配置 proxy 代理的例子：

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

export default defineConfig({
  server: {
    proxy: {
      // 使用字符串简写形式
      '/api': 'http://localhost:3000', // 所有访问 /api 的请求都会被代理到 http://localhost:3000/api
      
      // 使用对象的形式，提供更多的配置选项
      '/api2': {
        target: 'http://localhost:3001', // 目标服务器
        changeOrigin: true, // 控制服务器收到的请求头中 host 字段的值
        rewrite: (path) => path.replace(/^\/api2/, ''), // 重写请求路径，去掉 /api2
        // 可以在这里添加更多的 http-proxy 选项
      },
      
      // 添加其他路径的代理规则
      '/other-path': {
        target: 'http://other-server.com',
        changeOrigin: true,
        // 其他配置...
      }
    }
  }
});

在上面的例子中，我们配置了三个代理规则：

当请求路径以 /api 开始时，请求将被代理到 http://localhost:3000 上，并且请求路径会保持不变，例如 /api/user 会代理到 http://localhost:3000/api/user。
对于以 /api2 开始的请求，这些请求也会被代理到另一个目标服务器 http://localhost:3001，但是因为使用了 rewrite 配置，所以请求路径中的 /api2 会被去掉，例如 /api2/user 会被代理到 http://localhost:3001/user。
最后一个代理规则是一个其他路径的代理，将 /other-path 开头的请求代理到 http://other-server.com。

2024年6月29日 12:07 回复

Vite 如何配置 proxy 代理？

3个答案

你的答案