Vite 和 Vue 配置代理解决前端跨域问题

在前端开发中，我们经常会遇到跨域问题。这是因为浏览器的同源策略限制了不同域之间的通信。为了解决这个问题，我们可以使用代理来转发请求。Vite 和 Vue 都支持配置代理，下面将分别介绍如何在它们中进行配置。
一、Vite 配置代理
Vite 提供了一个简单的方式来配置代理。在 Vite 的配置文件中，我们可以使用 server.proxy 选项来设置代理。以下是一个示例：

// vite.config.js
export default {
server: {
proxy: {
'/api': {
target: 'http://example.com', // 目标服务器地址
changeOrigin: true, // 是否改变请求头中的 Host 字段
rewrite: (path) => path.replace(/^/api/, '') // 重写请求路径
}
}
}
}

在上面的示例中，我们将所有以 /api 开头的请求都代理到 http://example.com。changeOrigin 选项用于改变请求头中的 Host 字段，以确保请求能够正确发送到目标服务器。rewrite 选项用于重写请求路径，这里我们将所有 /api 开头的路径都去掉。
二、Vue 配置代理
Vue.js 本身并不提供直接的代理配置方式，但我们可以使用其他工具或方法来实现代理。其中一种常见的方法是使用 Node.js 的 http-proxy-middleware 中间件。以下是一个示例：

1. 首先，安装 http-proxy-middleware 中间件：

   npm install http-proxy-middleware --save-dev

2. 在 Vue.js 的项目根目录下创建一个名为 proxy.conf.js 的文件，并添加以下代码：

   const { createProxyMiddleware } = require('http-proxy-middleware');
   module.exports = function(app) {
   app.use(
   '/api',
   createProxyMiddleware({
   target: 'http://example.com', // 目标服务器地址
   changeOrigin: true, // 是否改变请求头中的 Host 字段
   pathRewrite: {
   '^/api': '' // 重写请求路径
   }
   })
   );
   };

   在上面的示例中，我们将所有以 /api 开头的请求都代理到 http://example.com。changeOrigin 选项用于改变请求头中的 Host 字段，以确保请求能够正确发送到目标服务器。pathRewrite 选项用于重写请求路径，这里我们将所有 /api 开头的路径都去掉。
3. 在 Vue.js 的项目根目录下创建一个名为 vue.config.js 的文件（如果已经存在则无需创建），并添加以下代码：

   module.exports = {
   devServer: {
   before: require('./proxy.conf.js') // 在开发服务器启动前运行代理配置代码
   }
   };

   在上面的示例中，我们将 proxy.conf.js 中定义的代理配置添加到了 Vue.js 项目的开发服务器中。这样，在开发时就可以通过代理来访问后端接口了。请注意，生产环境下的代理配置需要在构建项目时单独配置或使用其他方法实现。