Vue3 配置 vite.config.js 解决跨域问题

在Vue3项目中，如果你使用Vite作为构建工具，并希望通过配置vite.config.js来解决跨域问题，你可以使用Vite的代理功能。以下是一个简单的配置示例，它将会将开发服务器上的API请求代理到一个指定的API接口地址，从而绕过浏览器的同源策略，解决跨域问题。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://backend.example.com', // 目标API服务器的地址
        changeOrigin: true, // 是否改变源地址
        rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径
      },
    },
  },
});

在这个配置中，当你的Vue应用尝试访问/api开头的路径时，Vite会自动将请求代理到http://backend.example.com。changeOrigin选项设置为true意味着请求头中的Host将会被设置为目标URL的主机名，这对于一些后端服务来说是必要的，因为它可以帮助后端服务器正确地返回响应。

请确保将target的值替换为你实际的API服务器地址。这样配置后，你的Vue应用在开发环境中就可以直接请求本地服务器代理的API接口，而不会遇到跨域问题。