vue 跨域

// 在 Vue 项目中处理跨域问题，通常需要在开发环境中配置代理服务器。以下是一个使用 vue-cli 创建的项目的示例配置。

// 1. 在项目的根目录下找到 `vue.config.js` 文件（如果没有该文件，可以手动创建一个）。
// 2. 添加以下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com', // 目标 API 服务器的 URL
        changeOrigin: true,           // 是否允许跨域
        pathRewrite: {                // 路径重写规则
          '^/api': ''
        }
      }
    }
  }
};

// 解释：
// - `target`: 指定目标 API 服务器的地址，例如 `http://example.com`。
// - `changeOrigin`: 设置为 `true` 时，会改变请求的 origin，使得请求能够成功发送到目标服务器。
// - `pathRewrite`: 用于重写路径，例如将 `/api` 前缀替换为空字符串，这样前端请求 `/api/users` 时，实际请求的是 `http://example.com/users`。

// 3. 在 Vue 组件或 Vuex 中发起请求时，可以直接使用 `/api` 前缀：
axios.get('/api/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });