vue中axios配置代理的俩种方式及优缺点

概述：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

当我们使用vue向服务器发送AJAX请求时，我们会遇到跨域问题，一般跨域的解决方案有俩种，一种是官方的CORS,还有一种就是利用<script>中的src(就是jsonp),

在vue中则可以使用代理服务器来解决跨域的问题。

接下来有俩种方法的展示和介绍：

在vue.config.js里面进行配置
一：

devServer: {

        proxy:'http://localhost:5000'     //代理服务器的目标的基础路径

    }

 

二：

devServer: {

        proxy: {

            '/first': {

                target: 'http://localhost:5000',   //代理目标的基础路径

                pathRewrite: { '^/first': '' },      //重写路径，将代理服务器发送给服务器的请求路径进行更改，这样就可以让服务器收到的请求正常

                ws: true,     //用于支持websocket

                changeOrigin: true     //用于控制请求头中的host值

               

            },

        }

    }

但是这种需要在配置axios的路径的时候，在后方加入设置好的前缀

例：

methods: {

    add(){

      axios.get('http://localhost:8080/first/students').then(

        response=>{console.log("请求成功了",response.data)},

        error =>{console.log("请求失败了",error.message)}

      )

    }

  },

区别于优缺点：

第一种优点：配置相对简单

缺点：只能配置一个代理，就是当后台服务器超过一台的时候，便不再适用，而且当你前端资源（public）上面如果有名字相同的文件，vue会自动将本地的资源视为优先，则会导致你请求后台的数据变成你自己曾经写的公共数据，获取不到后台的数据，则不能灵活的控制是否进行代理。

第二种优点：可以配置多个代理，而且还可以灵活的控制是否进行代理，也通过这样控制是否进行代理，加入了就进行代理，优先后台的资源，不加则只会获取前端资源，前端资源里面没有则报错

缺点：配置相对复杂一点点，而且需要加前缀