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 项目中成功设置代理，解决开发环境中的跨域请求问题。