vuecli3项目解决跨域问提的案例

在VueCLI3项目中解决跨域问题的一种常见方案是使用代理。下面是一个案例说明：

1. 首先，在VueCLI3项目的根目录下创建一个vue.config.js文件（如果已经存在则跳过此步骤）。

2. 打开vue.config.js文件，添加以下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',  // 目标接口的域名
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''  // 将请求地址中的/api替换为空字符串
        }
      }
    }
  }
}

以上代码中的`target`为要访问的目标接口的域名，`pathRewrite`用于路径重写，将请求地址中的`/api`替换为空字符串，这样在实际发送请求时就不需要包含`/api`。

3. 在项目中使用跨域请求时，可以在请求地址前添加`/api`前缀，例如：

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

以上代码中，发送的请求实际上会被代理到`http://api.example.com/users`。

需要注意的是，以上只是一种常见的解决方案，并不是唯一的方法。根据具体情况，你可能需要调整配置文件中的参数或使用其他方法来解决跨域问题。