利用Vue-cli中的proxyTable解决开发环境的跨域问题

利用Vue-cli中的proxyTable解决开发环境的跨域问题

对于前端开发人员来讲，当你在开发环境中与后台开发人员进行数据联调时，总会遇到烦人的跨域问题！

解决跨域的方法有很多种，比如你和后台人员经过友好协商后，你可以通过JSONP的方式或者让后台人员将代码设置为允许你进行跨域！但是往往前后台开发人员的配合默契度是不太高的。如果后台只给你接口，并明确告诉你不允许修改接口，怎么办？怎么办才能实现跨域？此时你就可以通过proxyTable来解决跨域问题！
通过proxyTable解决跨域在Vue-cli当中是很简单的。只需修改config文件夹下的index.js中的proxyTable就能实现：

//代理配置表，在这里可以配置特定的请求代理到对应的API接口
proxyTable:{
    "/api":{
        target:"http://www.zhangpeiyue.com",//访问的服务器地址
        changeOrigin:true,//true为开启代理
        //secure: true, // 如果是https接口，需要配置这个参数
        pathRewrite:{
            '^/api': '/'//路径的替换规则
           /*
            *这里的配置是正则表达式，以/api开头的路径将会被‘/'替换掉
            *假如后台文档的接口是 "http://www.zhangpeiyue.com/user/add"
            *前端调取API接口应写：axios.get('/api/user/add')
            */
        }
    }
}

以上代码的“/api"你可以认为用于代替target里面的地址，调取接口的地址直接用api来替换。
比如后台接口地址为：“http://www.zhangpeiyue.com/user/login”。
你可以直接写为："/api/user/login"即可。
当然，你也可以根据不同的API域名所负责的模块不同来进行多项配置：

//代理配置表，在这里可以配置特定的请求代理到对应的API接口
proxyTable:{
    "/adv":{
        target:"http://adv.zhangpeiyue.com",//访问的服务器地址
        changeOrigin:true,//true为开启代理
        pathRewrite:{
            '^/adv': '/'//路径的替换规则
        }
    }，
    "/user":{
        target:"http://user.zhangpeiyue.com",//访问的服务器地址
        changeOrigin:true,//true为开启代理
        pathRewrite:{
            '^/user': '/'//路径的替换规则
        }
    }
}

以上代码"/adv"与"/user"分别负责项目中的广告模块与用户模块。
例如：
后台文档的地址是：“http://adv.zhangpeiyue.com/add”，
前端调取API接口应写：axios.get(’/adv/add’)

注意：

配置修改完以后一定要重新npm run dev 一次

补充：

changeOrigin的属性值为一个布尔值，如果设置为true，那么本地会虚拟一个NODE服务端接收你的请求并代你发送该请求(中间件)。因为服务端语言是没有跨域问题的，所以这样最终就解决了跨域问题了。不过这只适用于开发环境，上线后可以使用反向代理nginx。