最新Vue3项目(Vue3.2)Vite构建TypeScript版如何在前端处理CORS(跨域问题)解决办法之用Proxy(代理)如何配置?

在Vue 3项目中，如果你遇到CORS（跨域资源共享）问题，通常是因为前端应用尝试从一个与加载它的页面不同源的服务器获取资源。解决这个问题的一种方法是使用代理服务器，将前端的API请求重定向到后端服务器，从而绕过CORS的限制。

以下是在Vite构建的Vue 3项目中设置代理的步骤：

1. 在Vite项目的根目录中找到vite.config.ts文件（如果没有，则创建一个）。
2. 在vite.config.ts文件中，使用proxy配置项来设置代理。

// vite.config.ts
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-domain.com', // 后端服务器的地址
        changeOrigin: true, // 这个选项用于改变源地址，允许服务器认为请求来自于本地
        rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径，去除/api前缀
      },
    },
  },
});

在这个配置中，当前端应用尝试通过/api路径访问资源时，请求会被重定向到http://backend-domain.com。changeOrigin选项设置为true，这样后端服务器就会认为请求是来自同源的，从而不会返回CORS错误。rewrite函数用于重写请求的路径，去除前端添加的/api前缀。

请确保替换target的值为你的后端服务器的实际地址。这样配置后，前端应用发出的以/api开头的请求都会被重定向到指定的后端服务器，从而解决CORS问题。