智慧团建系统网站_汕头百城招聘网_西安危机公关公司_电商平台开发需要多少钱

时间:2025/7/26 9:59:17来源：https://blog.csdn.net/qq_16242613/article/details/144930602 浏览次数:0次

1. vue3 vite 使用代理转发

在使用 Vue 3 和 Vite 构建的前端项目中，配置代理转发是一种常见的解决跨域问题的方法。
通过在 vite.config.js 文件中配置代理规则，可以有效地将前端请求转发到后端服务器，从而避免因浏览器同源策略导致的跨域问题。
下面详细介绍如何在 Vue 3 和 Vite 项目中配置代理转发。

1.1. 创建或编辑 vite.config.js 文件

首先，确保你的项目中存在 vite.config.js 文件。如果项目中还没有这个文件，你需要手动创建它。
这个文件用于配置 Vite 的各种选项，包括开发服务器的代理设置。

1.2. 配置代理规则

在 vite.config.js 文件中，可以通过 server.proxy 属性来配置代理规则。这里是一个具体的例子，展示了如何将 /api 开头的请求代理到本地的 http://127.0.0.1:3000 服务器上：

import { defineConfig } from'vite';
import vue from'@vitejs/plugin-vue';exportdefaultdefineConfig({
plugins: [vue()],
server: {proxy: {'/api': {target: 'http://127.0.0.1:3000',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},},},
});

1.2.1. 配置项解释

/api：这是匹配请求路径的前缀。所有以 /api 开头的请求都会被代理。
target：这是目标服务器的地址。所有匹配的请求将被转发到这个地址。
changeOrigin：设置为 true 时，Vite 会更改请求头中的 Origin 字段为 target 地址，这对于某些后端服务器来说是必要的。
rewrite：这是一个函数，用于重写请求路径。在这个例子中，它会将 /api 前缀去掉，确保后端能够接收到正确的路径。

1.3. 在前端代码中使用代理

在前端代码中，你可以像往常一样发起请求，只需确保请求路径以 /api 开头。
例如，如果你使用 axios 发起请求，可以这样写：

import axios from'axios';asyncfunctionfetchUserData() {
try {const response = await axios.get('/api/user/data');console.log('User Data:', response.data);} catch (error) {console.error('Error fetching user data:', error);}
}// 调用函数
fetchUserData();

在这个例子中，实际的请求会被代理到 http://127.0.0.1:3000/user/data。

1.4. 高级配置

1.4.1. 多个代理规则

如果你需要配置多个代理规则，可以在 proxy 对象中添加更多的条目。例如：

import { defineConfig } from'vite';
import vue from'@vitejs/plugin-vue';exportdefaultdefineConfig({
plugins: [vue()],
server: {proxy: {'/api': {target: 'http://127.0.0.1:3000',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},'/auth': {target: 'http://127.0.0.1:4000',changeOrigin: true,rewrite: (path) => path.replace(/^\/auth/, ''),},},},
});

1.4.2. 处理 WebSocket 代理

如果你的应用需要处理 WebSocket 请求，可以在代理规则中添加 ws 选项：

import { defineConfig } from'vite';
import vue from'@vitejs/plugin-vue';exportdefaultdefineConfig({
plugins: [vue()],
server: {proxy: {'/api': {target: 'http://127.0.0.1:3000',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),ws: true, // 处理 WebSocket 请求},},},
});