vue-cli里跨域的解决办法devServe proxy

应用场景：现实中，我们经常会遇到前后端分开开发的情况，由于前端使用的vue-cli地址是node帮我们搭建了一个本地的服务器，一般是http://localhost:8080，这个在我们创建vue项目时就帮我们搭建好的。这里面的端口我们是可以改变的，可以在vue.config.js（cli3以后这个文件需要自己创建）文件里的webServer里修改post端口。代码块如下：

module.exports = {
    devServer: {
        port : 2000,
      }
}

上面说的都是本地开发是的服务器地址，但是后台开发的代码都是部署在服务器上的，这些服务器的网址和你本地的地址明显出现了跨域的问题，所以你在本地使用Axios等方式去请求后台数据的时候就出现了跨域的情况。那么如何去处理呢？

解决问题：

1. 简单的使用express搭建一个本地的node服务器，端口绑定到3000
2. 本地使用使用axios请求我们搭建好的本地node服务器，按照我们之前应用场景里写的端口是2000，浏览器net里会出现了服务器找不到404的报错
3. 修改devServer里的proxy实现跨域请求

   module.exports = {
       devServer: {
           port : 2000,
           proxy: {
             '/test': {
               target: 'http://localhost:3000',
               pathRewrite: {'^/test' : ''}, //把api替换成''，也就是'^/api' => ''
               logLevel: "debug"  //输出跨域请求的信息
             }
           }
         }
   }
   

   代码的大致意思就是，你axios请求网址会把请求的网址会被替换成target里的http://localhost:3000。也就是你本地的http://localhost:2000 ====》http://localhost:3000。具体实现大概是axios发送一个请求，被proxy拦截然后查看有没有"/test"这个key值，如果有那就把这个请求的网址替换成taget了的http://localhost:3000。然后查看是否有pathRewrite，如果有，则把/test替换成‘’。具体代码：其中logLevel: "debug"  是为了查看跨域的信息，所以上面的代码效果是可以看到跨域请求已经完成。

4. 就上面所说的内容axios请求里的/test和proxy里的/test是对应的。

跨域大概就这样，这是我学习得到得结论，如果有说错，欢迎请大家指出，毕竟笔者知识有限。。。