vue3 跨域

// 在 Vue 3 项目中处理跨域问题，通常是在后端配置 CORS（跨域资源共享）或使用代理服务器。以下是一个简单的示例，展示如何在开发环境中通过配置 `vue.config.js` 使用代理来解决跨域问题。

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000', // 后端 API 的地址
        changeOrigin: true,              // 是否改变请求的origin
        pathRewrite: {
          '^/api': ''                    // 重写路径，去掉 /api 前缀
        }
      }
    }
  }
};

// 解释说明：
// 1. `devServer.proxy` 配置项用于设置代理规则。
// 2. `/api` 是前端请求的前缀，所有以 `/api` 开头的请求都会被代理到 `target` 指定的后端地址。
// 3. `changeOrigin` 设置为 `true` 可以确保请求的 `host` 头部会被替换为目标服务器的域名。
// 4. `pathRewrite` 用于重写请求路径，去掉 `/api` 前缀，以便后端能够正确解析请求。

// 这种方式适用于开发环境中的跨域问题，生产环境通常需要在服务器或网关层面进行配置。