Vue 3 + Vite 项目中配置代理解决开发环境中跨域请求问题
在 Vue 3 + Vite 项目中，配置代理是解决开发环境中跨域请求问题的常见方法。通过在 Vite 的配置文件中设置代理，可以将前端请求转发到后端服务器，从而避免浏览器的同源策略限制。
1. 创建 Vue 3 + Vite 项目
首先，确保你已经安装了 Node.js。然后，使用以下命令创建一个新的 Vue 3 + Vite 项目：
npm create vite@latest my-vue-app --template vue
进入项目目录并安装依赖：
cd my-vue-app
npm install
启动开发服务器：
npm run dev
此时，开发服务器默认运行在 http://localhost:5173/。
2. 配置代理
在 Vite 项目中，代理配置位于 vite.config.js 文件中。假设你的后端服务器运行在 http://127.0.0.1:3000，并且前端请求的路径以 /api 开头，你希望将这些请求代理到后端服务器。
编辑 vite.config.js，添加代理配置：
import { defineConfig } from 'vite';export default defineConfig({server: {proxy: {'/api': {target: 'http://127.0.0.1:3000',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},},},
});
配置说明：
target: 代理的目标地址，即后端服务器的地址。changeOrigin: 是否修改请求头中的Origin字段，通常设置为true。rewrite: 重写请求路径，将以/api开头的请求路径去掉/api部分，转发到后端服务器。
3. 使用代理
在前端代码中，发起请求时使用相对路径 /api，例如：
import axios from 'axios';axios.get('/api/user/info').then(response => {console.log(response.data);}).catch(error => {console.error(error);});
由于代理配置的存在，实际请求会被转发到 http://127.0.0.1:3000/user/info。这种方式可以有效避免跨域问题。
4. 注意事项
- 代理配置仅在开发环境有效，生产环境需要通过其他方式处理跨域问题。
- 确保后端服务器已启动，并且监听在配置的目标地址上。
- 在使用代理时，前端请求的路径应与代理配置中的路径匹配。
通过上述配置，你可以在 Vue 3 + Vite 项目中成功设置代理，解决开发环境中的跨域请求问题。