配置使用devServer代理服务器

为什么会有跨域

因为为了信息安全，浏览器遵守同源策略。当协议http，域名，或端口号中有一个不相同时，就会产生跨域，由于浏览器的限制，跨域一般只在前端中出现，解决跨域问题目前流行的方法有JSONP、CORS、Nginx代理服务器。本文主要讲述Vue-cli3.0脚手架项目中代理服务器的配置方法。

第一步（下载）

去npm官网https://www.npmjs.com/下载插件（http-proxy-middleware），在项目根目录打开命令行窗口，输入：

npm install --save http-proxy-middleware

第二步（配置）

打开vue.config.js配置文件,复制下面代码：

// module.exports={
//     lintOnsave:false
// }
module.exports={
    lintOnSave:false,
    devServer:{
        /* host: 'localhost',//target host
        port: 5000, */
        //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
        proxy:{
            '/api':{
                target: 'http://127.0.0.1:5000',//代理地址，这里设置的地址会代替axios中设置的baseURL
                changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
                //ws: true, // proxy websockets
                //pathRewrite方法重写url
                pathRewrite: {
                    '^/api': '/' 
                    //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
                    //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
               }
        }}
    },
}

这里target属性是目标服务器的地址和端口号。

第三步（使用）

我这里在methods里定义的事件处理方法，点击按钮触发；也可以在生命周期函数mounted里发请求，一旦组件挂载后就发请求：

getData(){
      axios.get('/api/login').then(
        res=>{
          let result = res.data.employees.map((item,index)=>{
            console.log(item);
          })
        },
        err=>{}
       )
    }

配置代理后，代理中的名字api，在每次请求的是时候都要在路径前面加上/api，否则代理服务器将不会为我们代理发起请求。