Vue中使用proxy配置代理解决跨域问题

如果使用vue/cli 4.x以上版本创建的Vue项目，在项目的根目录中创建 vue.config.js 配置文件。

module.exports = {
    devServer: {
        proxy: {
        '/api1': {
          target: 'http://localhost:3000', //服务端地址
          ws: true,
          changeOrigin: true, // 允许跨域
          pathRewrite: {
           '^/api1': ''   // 标识替换，使用 '/api' 代替真实的接口地址
          },
          '/api2': {
          target: 'http://localhost:3000', //服务端地址
          ws: true,
          changeOrigin: true, // 允许跨域
          pathRewrite: {
           '^/api2': ''   // 标识替换，使用 '/api' 代替真实的接口地址
          }
        }
      }
    }
  }

axios请求代码：

// 使用 '/api' 代替真实接口地址
// 真实地址为 http://localhost:3000/users/find
this.$axios.get('/api/users/find').then(res=>{
    console.log(res) 
})