vue：vite 代理服务器 proxy 配置

Vite 代理服务器（Proxy）的配置通常用于开发环境，以解决跨域请求等问题。以下是一个详细的配置步骤：

通过以上步骤，你就可以在 Vite 项目中配置代理服务器，以便在开发过程中方便地访问后端服务。

1. ‌找到 Vite 配置文件‌：

   • Vite 的配置文件通常为项目根目录下的 vite.config.js 或 vite.config.ts。如果项目中没有这个文件，可以手动创建一个。

2. ‌配置代理‌：

   • 在 vite.config.js 或 vite.config.ts 文件中，通过 export default 导出一个配置对象，并在该对象中添加 proxy 属性。proxy 属性是一个对象，用于配置各个代理规则。

3. ‌定义代理规则‌：

   • 每个代理规则都是一个以目标URL为键的对象。该对象可以包含以下属性：
     • target：代理的目标地址，即后端服务的实际地址。
     • changeOrigin：是否改变源地址。通常设置为 true，以便代理服务器能够正确识别请求的来源。
     • rewrite：重写规则，用于修改请求的路径或查询参数等。
     • headers：自定义请求头，用于在代理请求中添加额外的HTTP头。

4. ‌示例配置‌：

   以下是一个简单的 Vite 代理配置示例：

   // vite.config.js
   export default {
     proxy: {
       '/api': {
         target: 'http://localhost:8000', // 后端服务地址
         changeOrigin: true,
         rewrite: (path) => path.replace(/\/api/, '')
       }
     }
   };
   

   在上面的示例中，所有以 /api 开头的请求都会被代理到 http://localhost:8000，并且请求路径中的 /api 前缀会被移除。

5. 重启 Vite‌：

   • 配置完成后，需要重启 Vite 开发服务器，以便使代理配置生效。

6. ‌使用代理‌：

   • 在前端代码中，你可以像访问本地资源一样访问代理的后端服务。例如，如果你配置了代理 /api 到 http://localhost:8000，你可以在前端代码中通过 fetch('/api/data') 来访问 http://localhost:8000/data。

7. ‌注意事项‌：

   • 在设置代理后，建议在开发过程中禁用其他不必要的网络请求，以减少潜在的安全风险。
   • 在生产环境中，通常不会使用代理，而是直接配置后端服务以允许跨域请求，或使用其他安全措施来保护网络环境。