前端 vite 配置代理服务器 解决跨域问题

在Vite项目中，你可以通过修改Vite配置文件来设置代理服务器，从而解决跨域问题。以下是一个简单的配置示例：

1. 找到项目根目录下的 vite.config.js 文件（如果你使用的是 TypeScript，则可能是 vite.config.ts）。
2. 在配置文件中，添加一个 server 配置对象，并在其中设置 proxy 属性。
3. 在 proxy 对象中，你可以定义要代理的路径和相应的目标服务器。

下面是一个配置代理服务器来解决跨域问题的示例代码：

// vite.config.js 或 vite.config.ts
import { defineConfig } from 'vite';
 
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://backend.example.com', // 目标服务器地址
        changeOrigin: true, // 是否改变源地址
        rewrite: (path) => path.replace(/^\/api/, ''), // 路径重写
      },
    },
  },
});

在这个配置中，当请求以 /api 开头时，所有的请求都会被代理到 http://backend.example.com。changeOrigin 设置为 true 可以使得代理服务器把接收到的请求的 Host 头部改为目标服务器的地址，这对于解决跨域问题是非常重要的。rewrite 函数用于重写请求路径，这里的例子是去除了路径中的 /api 前缀。

这样配置后，前端应用发出的请求会被 Vite 代理服务器转发到指定的后端服务器，从而避免了跨域错误。