当前位置：首页 > article >正文

Vue 3 + Vite 项目中配置代理解决开发环境中跨域请求问题

article 2025/2/24 17:19:54

在 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);
  });