基于vite脚手架--解决跨域问题

在现代前端开发中，跨域问题一直是一个令人头疼的难题。当我们使用 Vite 脚手架构建项目时，如何有效地解决跨域问题就成为了提升开发效率与项目质量的关键所在。Vite 作为一款新兴的前端构建工具，以其卓越的性能和丰富的功能特性备受开发者青睐。然而，在涉及到与不同域名或端口的后端服务器进行数据交互时，浏览器的同源策略往往会成为阻碍。本文将深入探讨基于 Vite 脚手架解决跨域问题的多种有效方法，帮助前端开发者顺利突破这一开发瓶颈，构建出功能完备且交互流畅的前端应用。

一：文件中找到vite.config.js / vite.config.ts

二：在配置文件中添加一个server.proxy 配置，指定需要代理的资源和目标URL

server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3001', // 目标服务器地址
        changeOrigin: true, // 是否改变源地址
        rewrite: (path) => path.startsWith('/') ? path : `/${path}` // 根据需要调整重写规则  
      }
    }
  }

测试：