一、问题的产生
在项目开发过程中遇到了一个问题,访问图片与访问其他的数据的服务器不是同一个,虽然后台已经将两个服务器合并到一个,但是前台配置好后访问就会产生了一个问题,具体报错如下:
简单来说就是跨域问题,经过我的求助和努力,找到了解决的方法,用反向代理。
二、反向代理的原理和能解决的问题
2.1什么是跨域呢?
跨域问题的出现是因为浏览器的同源策略问题,所谓同源:就是两个页面具有相同的协议(protocol),主机(host)和端口号(port),它是浏览器最核心也是最基本的功能,如果没有同源策略我们的浏览器将会十分的不安全,随时都可能受到攻击。
当,协议名,域名,端口号,三者有一个不同都会发生跨域问题。
这里强调一点:发生了跨域,并不是请求没有发送出去,它是请求发送成功了,并且服务端也给你把数据返回了,但是浏览器为了安全性给拒绝了。
2.2反向代理的原理
代理服务是指内部网络对Internet发出连接请求,需要制定代理服务将原本直接传输至Web服务器的HTTP发送至代理服务器中。换句话来说,代理服务就是网络信息的中转站。代理服务器作为浏览器与Web服务器之间的另一类服务器,配备代理服务器,浏览器无需直接至Web服务器获取网页,只需向代理服务器发出所需的请求,由代理服务器传送给访问者所需的浏览器。普通的Web代理服务器仅支持内部网络的访问请求,反向代理服务与普通的代理方法并不存在明显冲突。如果一个代理服务器可以代理外部网络主机访问内部网络,这类代理服务模式称之为反向代理服务。
反向代理的工作原理是,代理服务器来接受客户端的网络访问连接请求,然后服务器将请求有策略的转发给网络中实际工作的业务服务器,并将从业务服务器处理的结果,返回给网络上发起连接请求的客户端。
就好比:
当你拨打10086,每次都是不同的客服在接听,我们也不需要关心电话那边是谁,只要能够解答问题即可
这里10086总机号码就是我们说的反向代理。我们作为客户方,不知道真正提供服务的人是谁
也就是说,反向代理隐藏了真实的服务端
三、VUE中反向代理的配置
找到vue.config.js文件,如果没有就自己手动配置。
配置反向代理
之后在request.js中,将环境变量baseURL配置为
之后正常配置接口,调取接口就可以了!
但是:
开发阶段才会使用proxy反向代理,线上项目一般是使用nginx来实现
这里插一下,由于我访问的是图片,返回的数据和正常的数据不一样,所以在配置接口的时候:指定返回数据类型是“Blob”。
最后在页面调用:
“Bolb”数据类型在后台显示是这样的
在这个时候,图片我们已经拿到了
但是在页面我们还无法显示,想要展示出来我们需要转换。
所以这里再插一下:解决这个数据类型的方法
转换为url:
转换为base64格式:
两种都可以直接放在img标签的src中的
只不过打印出来
url长这个样子:
而base64是这个样子的:
两个方法展示出来的效果是一样的。所以用哪个都就可以!
好啦!
到此我的问题就解决了,我所能分享的也就这些了!
最后在此强调一下,这篇文章仅限于我在我现在项目中遇到的问题,解决的方法,不够严谨和专业,所以在实践中若遇到什么问题就请就实际问题解决,请不要批评这篇文章!
在此感谢各位的阅读,鞠躬!撒花!