Vite本地开发测试中遇到跨域问题，主要是由于浏览器的同源策略（Same-Origin Policy）限制所导致的。同源策略是浏览器的一种安全机制，它规定了浏览器如何限制一个源（包括协议、域名和端口）的文档或脚本与来自另一个源的资源进行交互。这种限制的目的是防止恶意网站通过跨域请求来窃取用户的敏感信息或执行潜在的安全漏洞。
在Vite本地开发环境中，前端应用通常运行在一个源（例如localhost:5173），而后端API可能运行在不同的源（例如localhost:8080）。当前端应用尝试向后端API发送请求时，由于两个源不同，浏览器的同源策略会阻止这种跨域请求，从而导致跨域问题。
为了解决这个问题，Vite提供了内置的HTTP代理服务器功能。通过在Vite的配置文件（如vite.config.js或vite.config.ts）中配置代理规则，开发者可以将前端应用发出的请求转发到实际的后端服务上，从而绕过浏览器的同源策略限制。具体来说，配置代理服务器需要定义一系列的代理规则，每个代理规则包含一个或多个前缀路径，以及目标服务器的URL。当前端应用在开发环境下运行时，Vite服务器会监听所有请求。如果请求的URL匹配任何代理规则的前缀，Vite服务器会拦截这个请求，并将其转发到代理规则中定义的目标服务器。这个过程对前端应用是透明的，即前端应用无需关心请求是如何被转发的，只需要按照正常的请求方式发出请求即可。
需要注意的是，这种代理机制仅在开发环境中有效。在生产环境中，通常需要后端服务正确配置CORS（Cross-Origin Resource Sharing）策略或其他跨域支持，以确保前端应用能够顺利地与后端服务进行交互。因此，在将应用部署到生产环境之前，开发者需要确保后端服务已经配置了适当的跨域支持策略。
假设API接口 https://chaihongjun.me/api/getPosts, axios封装之后的baseURL是 https://chaihongjun.me，然后请求地址封装：
export function getPosts() {
return service({
url: `/api/getPosts`,
method: 'get'
});
}那么Vite.config.js的代理配置如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),
],
resolve: {
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
alias: {
'@': '/src',
},
},
// 这里是代理部分
server: {
proxy: {
'/api': {
target: 'https://chaihongjun.me/api',
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^\/api/, ''),
},
}
},
})
