Vite环境下解决跨域问题
在 Vite 开发环境中，可以通过配置代理来解决跨域问题。以下是具体步骤：
- 在项目根目录下找到
vite.config.js文件：如果没有，则需要创建一个。 - 配置代理：在
vite.config.js文件中，使用server.proxy选项来设置代理规则。例如，如果你的后端服务器运行在http://localhost:5054，而你的 Vite 开发服务器运行在http://localhost:3000，你可以这样配置： - javascript
import { defineConfig } from 'vite';export default defineConfig({server: {proxy: {'/api': {target: 'http://localhost:5054',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
});
上述代码中，/api 是代理的路径前缀。当浏览器发送以 /api 开头的请求时，Vite 会将请求代理到 http://localhost:5054 上，并去除路径中的 /api 前缀。changeOrigin 设置为 true ，表示修改请求头中的 Origin 字段，使其与目标服务器的域名一致，以避免跨域错误。
4.在前端代码中使用代理路径：修改你的 axios 请求地址，使用代理路径。例如：
const service = axios.create({ baseURL: '/api' });
const response = service.get('User/1/2');
这样，原本跨域的请求就会通过代理服务器转发，从而解决跨域问题。
如果不想在 vite.config.js 中配置代理，也可以使用浏览器的扩展程序来解决跨域问题，如 Allow CORS: Access-Control-Allow-Origin 等。安装并启用扩展程序后，它会在浏览器层面允许跨域请求，不过这种方法只适用于开发环境，生产环境中还是需要在服务器端进行配置。
代码图示
5.原理
请求拦截
浏览器的同源策略限制了从一个域向另一个不同域（协议、域名、端口任一不同）发起请求。在开发环境中，Vite 开发服务器可配置为代理服务器。当浏览器发出请求时，Vite 服务器会监听所有请求 。如果请求的 URL 匹配在vite.config.js中配置的代理规则前缀（比如示例中的/api ），Vite 服务器就会拦截该请求，不再让浏览器直接向目标地址发送请求，从而绕过浏览器同源策略的限制。
转发请求
Vite 服务器拦截请求后，会将其转发到在代理规则中指定的目标服务器（例如配置中的http://localhost:5054 ）。这一过程中，Vite 服务器充当了中间人的角色，代替浏览器与目标服务器进行通信。由于服务器与服务器之间通信不受同源策略限制，所以能顺利将请求发送到后端服务器。
改变请求源
为避免目标服务器因请求来源问题拒绝请求，Vite 服务器会修改请求头中的Host和Origin字段 。通过将changeOrigin设置为true，Vite 服务器会调整请求的源信息，使请求看起来像是从目标服务器的域发出的，确保目标服务器能够正常接收并处理请求。
路径重写
在将请求转发到目标服务器之前，Vite 服务器会根据配置的rewrite函数对请求路径进行重写 。比如在示例中rewrite: (path) => path.replace(/^\/api/, '') ，会把请求路径中匹配/api前缀的部分去除，保证请求到达目标服务器时路径正确，使后端服务器能正确处理请求。
响应转发
目标服务器处理完请求后，将响应返回给 Vite 服务器，Vite 服务器再把响应转发回前端应用。前端应用接收到的响应就如同是直接从目标服务器获取的一样，整个代理过程对前端应用透明，前端开发者无需关心请求转发的具体细节，只需像正常请求一样发起请求即可。
需注意，Vite 这种代理机制主要用于开发环境，在生产环境中，通常需要后端服务正确配置 CORS（跨域资源共享） 或者将前端和后端部署在同一域下，来确保跨域请求能正常处理。