在没有接触到反向代理之前,常常通过服务器端设置允许跨域的方式来解决跨域问题,这在生产环境容易发生安全问题。最近通过项目了解到反向代理这个方法来解决跨域问题。
反向代理的概念:

反向代理(Reverse Proxy)实际运行方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端,此时代理服务器对外就表现为一个服务器。

在vue-cli构建的项目中设置反向代理:
1、找到./config/index.js文件中找到proxyTable属性,如图
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配置

参考文档:
正向代理与反向代理

Logo

前往低代码交流专区

更多推荐