vue-cli4.x配置Proxy代理解决跨域

​ 我们在之前说了前端常见的跨域方式，其中说了proxy代理解决此问题

​ 它的思想思想实际上是通过访问a接口代理b接口的请求，因此我们最终访问的是b接口。使用这种方式的好处是我们可以使用任何方式请求数据都可以。并且前后端都不需要做处理，只需要运维改一些配置信息。

​ 我们这里vue项目使用的是nodejs服务器，因此我们要在vue.config.js中配置，最终传入webpack模块在给node服务器。

​ 下面是我们的vue.confg.js的信息：

module.exports={
     
  devServer:{
     
    host:'localhost',
    port:8080,
    proxy:{
     
      '/api':{
     
        target:'http://127.0.0.1:3000',
        changeOrigin:true,
        pathRewrite:{
     
          '/api':''
        }
      }
    }
  }
}

主要是在proxy中处理一些操作。/api实际上是一层拦截，当我们前端访问到这个路由时，会自动代理到我们taregt中的内容，然后将

changeOrigin改为true，这句话的意思时是否将主机头的原点更改为目标的请求头。pathRewrite是将api路由地址更改为某一个值，我们这里给空。

​ 我们这里的服务器使用的是nodejs，且端口为3000，我们web项目服务器端口为8080，因此这里web端访问服务器时就会跨域。

我们这里使用axios请求数据：

axios({
     
  url:'/api/data'
}).then((result) => {
     
  console.log(result);
})

可以直接看一下结果：

​ 首先我们发现这里时请求成功的，解决了跨域，接着我们再看一下Request URL中的内容，我们发现这里的主机名以及端口都是我们web服务器的。就好像这个接口时我们同源下的接口。内部再通过nodejs转发服务器的服务。

​ 所以我们的proxy时设置成功的。