Vue 配置代理以解决跨域问题

前言

跨域一直是一个在开发中很让人头疼的问题，解决跨域的方式有很多，后端和前端都有自己的解决方式，后端的话主要是在响应头里面添加信息，而前端主要是以代理的方式去进行解决，说白了就是将我们发送的请求交给跟我们同源的服务器，然后由他来做一个中转。其实，vue的代理是 借助vue静态服务器来实现的，使用的是 http-proxy-middleware 这个模块。
原理大概就是这样，配置起来其实还是蛮简单的。

在vue.config.js中配置

假设我们的项目运行在localhost:3000上，现在我们想发送请求到localhost:8000

module.exports = {
     
    proxy: {
     
      "/api": {
     
        // 以 “/api” 开头的 代理到 下边的 target 属性 的值 中
        target: http://localhost:8000,
        changeOrigin: true, // 是否改变域名
        ws: true,
        pathRewrite: {
     
          // 路径重写（以正则的规则去写）
          "^/api": "" 
        }
      }
    }
};

注意：关于路径重写，它的作用我们可以举一个例子来理解，上面我们配置的代理，会将所有已/api开头的请求给拦截，由代理服务器发送到8000端口上，这个/api是为了让我们区分请求是否需要代理而加上去的，8000端口上的实际接口倘若不是以/api开头的话，那么必然会报404，所以我们要将/api给替换为空字符串才可以

当我们需要向多台服务器进行代理时，可按照以下方式配置代理

module.exports = {
     
    proxy: {
     
      "/api1": {
     
        // 以 “/api1” 开头的 代理到 下边的 target 属性 的值 中
        target: http://localhost:8000,
        changeOrigin: true, // 是否改变域名
        ws: true,
        pathRewrite: {
     
          // 路径重写（以正则的规则去写）
          "^/api1": "" 
        }
      },
      "/api2": {
     
        // 以 “/api2” 开头的 代理到 下边的 target 属性 的值 中
        target: http://localhost:8001,
        changeOrigin: true, // 是否改变域名
        ws: true,
        pathRewrite: {
     
          // 路径重写（以正则的规则去写）
          "^/api2": "" 
        }
      }
    }
};

参考: https://blog.csdn.net/qq_36407748/article/details/90679991