vue用vite配置代理解决跨域问题（target、rewrite和changeOrigin的使用场景）

在Vite项目中，你可以通过修改Vite配置文件（vite.config.js或vite.config.ts）来设置代理服务器，以解决开发时的跨域问题。以下是一个配置示例：

// 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：这是一个虚拟的路径前缀，它会被请求URL匹配并替换。
• target：目标服务器的URL，即你想要代理到的API服务器地址。
• changeOrigin：设置为true时，代理服务器会将接收到的请求的Origin头部修改为目标服务器的地址，这对于一些需要根据Origin判断是否允许请求的服务器非常重要。
• rewrite：一个函数，用于重写请求路径。在这个例子中，它会将匹配到的/api前缀替换为空字符串。

使用场景：

当你的前端应用在开发环境中运行，并且需要调用一个位于不同域的后端API时，你可以配置一个代理来绕过浏览器的同源策略限制。当你访问/api/some/path时，代理服务器会将请求转发到http://backend.example.com/some/path。