面试题：如何在Vue项目中优雅地配置代理解决跨域问题

Question

假设你正在开发一个Vue项目，后端接口部署在不同的域名下，现在要求通过代理方式解决跨域问题。请描述在Vue项目中使用webpack - dev - server配置代理的详细步骤，并且说明当后端有多组不同路径的接口需要代理时，如何进行合理配置以避免冲突。

Answer 1

1. 在Vue项目中使用webpack - dev - server配置代理的详细步骤：
   • 安装依赖：确保项目中已安装webpack - dev - server。如果没有安装，可以通过npm install webpack - dev - server --save - dev进行安装。
   • 在项目根目录找到vue.config.js文件：如果没有此文件，可以手动创建。
   • 配置代理：在vue.config.js中添加如下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://后端接口域名',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

这里/api是自定义的代理前缀，target是后端接口实际的域名，changeOrigin设置为true表示允许跨域，pathRewrite用于重写路径，将/api前缀去掉，这样请求会正确转发到后端接口。 2. 当后端有多组不同路径的接口需要代理时，避免冲突的配置方法：

• 使用不同的代理前缀：为每组接口设置不同的代理前缀。例如：

module.exports = {
  devServer: {
    proxy: {
      '/api1': {
        target: 'http://后端接口域名1',
        changeOrigin: true,
        pathRewrite: {
          '^/api1': ''
        }
      },
      '/api2': {
        target: 'http://后端接口域名2',
        changeOrigin: true,
        pathRewrite: {
          '^/api2': ''
        }
      }
    }
  }
};

这样通过不同的前缀/api1和/api2区分不同组接口，避免冲突。

• 精确匹配路径：如果不同组接口有一些路径重叠部分，可以使用更精确的路径匹配。例如，一组接口路径以/user开头，另一组以/admin开头，可以这样配置：

module.exports = {
  devServer: {
    proxy: {
      '/user': {
        target: 'http://后端接口域名1',
        changeOrigin: true,
        pathRewrite: {
          '^/user': ''
        }
      },
      '/admin': {
        target: 'http://后端接口域名2',
        changeOrigin: true,
        pathRewrite: {
          '^/admin': ''
        }
      }
    }
  }
};

这样就可以根据请求路径的不同，准确地将请求代理到不同的后端接口，避免冲突。