使用Vite+TypeScript搭建的Vue3项目解决跨域问题的代理配置

在Vue3项目中，我们常常会遇到跨域问题，特别是在开发环境下。这是因为浏览器的同源策略限制了不同源之间的通信。为了解决这个问题，我们可以使用Vite的代理功能。通过配置Vite的代理设置，我们可以将所有请求转发到目标服务器，从而绕过同源策略的限制。
首先，你需要在Vite的配置文件vite.config.js中添加代理设置。以下是配置示例：

// vite.config.js
export default defineConfig({  // 导入 defineConfig 方法以获得更强大的配置功能
plugins: [vue()],  // 使用 vue 插件
proxy: {
'/api': {  // 这里是你希望代理的请求前缀
target: 'http://example.com',  // 目标服务器的地址
changeOrigin: true,  // 是否改变请求头中的 Host 字段
pathRewrite: {
'^/api': ''  // 将所有以 /api 开头的请求路径重写为空字符串
}
}
}
})

在上面的配置中，我们将所有以/api开头的请求代理到http://example.com。changeOrigin选项表示是否改变请求头中的Host字段，这里我们设置为true。pathRewrite选项用于重写请求路径，这里我们将所有以/api开头的请求路径重写为空字符串，这样就不会在目标服务器上留下/api前缀。
配置完成后，你可以在你的Vue组件或API请求中，使用以/api开头的请求路径，Vite会自动将它们代理到目标服务器。例如：

// 在 Vue 组件中
axios.get('/api/users').then(response => {
console.log(response.data);
});

或者在TypeScript中：

import { get } from 'axios';
get('/api/users').then(response => {
console.log(response.data);
});

现在，所有以/api开头的请求都会被代理到目标服务器，从而解决跨域问题。请注意，这种方法只适用于开发环境。在生产环境中，你可能需要使用反向代理服务器（如Nginx）来处理跨域问题。
总结一下，通过配置Vite的代理功能，我们可以轻松地解决Vue3项目中的跨域问题。只需要在Vite的配置文件中添加相应的代理设置，并在请求中使用正确的路径前缀，就可以实现跨域请求。这种方法特别适用于开发环境，但在生产环境中可能需要使用其他解决方案。