vue使用反向代理解决跨域问题方案

使用反向代理可以解决vue应用中遇到的跨域问题。下面是具体的攻略：

1. 安装http-proxy-middleware

在vue cli 3的脚手架中，已经默认安装了http-proxy-middleware依赖，无需再次安装。如果是手动创建的vue项目，则需要使用npm或yarn进行安装：

npm install http-proxy-middleware --save-dev

2. 配置反向代理

在vue.config.js文件中，为webpack dev server服务配置反向代理（vue cli 3的脚手架中已经配置好了）：

module.exports = {
  devServer: {
    proxy: {
      '/api': {  // 请求地址中包含/api的请求都会被转发到target，其中/api会被去掉
        target: 'http://localhost:3000',
        changeOrigin: true,  // 支持跨域
        pathRewrite: {
          '^/api': ''  // 将/api替换为空字符串
        }
      }
    }
  }
}

3. 在页面中使用代理

接下来，我们就可以使用代理进行请求了。在vue的组件中，使用相对地址请求：

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

以上代码中，axios会将请求发送到代理服务器中，并将地址从/api/data转换为http://localhost:3000/data来发送请求。服务器（Node.js）将处理请求并返回数据，最后由代理服务器将数据返回给前端。

示例说明

下面是两个示例说明，分别使用不同的反向代理方式。

示例1：代理本地Node.js服务器

在这个示例中，我们使用代理将请求发送到本地的Node.js服务器上。
假设Node.js服务器在http://localhost:3000上运行，而vue cli 3的开发服务器运行在http://localhost:8080上。我们可以这样配置反向代理（在vue.config.js文件中）：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

现在，我们可以使用相对地址发送到api请求，例如：

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

这将代理到http://localhost:3000/data并获得服务器数据。

示例2：代理外部API

在这个示例中，我们将请求代理到外部的API，以https://api.example.com/为例。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

在组件中，使用相对地址请求数据：

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

以上代码将代理到https://api.example.com/data处并返回数据。