vue通过反向代理设置解决http跨域请求问题
       在没有接触到反向代理之前,常常通过服务器端设置允许跨域的方式来解决跨域问题,这在生产环境容易发生安全问题。最近通过项目了解到反向代理这个方法来解决跨域问题。反向代理的概念:反向代理(Reverse Pro
·
在没有接触到反向代理之前,常常通过服务器端设置允许跨域的方式来解决跨域问题,这在生产环境容易发生安全问题。最近通过项目了解到反向代理这个方法来解决跨域问题。
反向代理的概念:
反向代理(Reverse Proxy)实际运行方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个服务器。
在vue-cli构建的项目中设置反向代理:
1、找到./config/index.js
文件中找到proxyTable属性,如图
2、按如下方式设置
proxyTable: {
'/api':{
target: 'http://www.baidu.com', // 发送请求的后台接口
changeOrigin: true,
secure: false, // 如果是https接口,需设置secure为false
pathRewrite:{
'^/api': '' // 用/api代替后端接口路径
}
}
}
3、发送请求
前端:
发送get请求,请求url为'/api/information'
代理服务器:
转发get请求,请求url为'http://www.baidu.com/information'
vue的反向代理设置proxyTable属性是webpack中的proxy属性,日后需要研究代理服务器设置,参考webpack的proxy配置
参考文档:
正向代理与反向代理
更多推荐
已为社区贡献4条内容
所有评论(0)