Proxy反向代理解决跨域问题

一、问题的产生

在项目开发过程中遇到了一个问题，访问图片与访问其他的数据的服务器不是同一个，虽然后台已经将两个服务器合并到一个，但是前台配置好后访问就会产生了一个问题，具体报错如下：

简单来说就是跨域问题，经过我的求助和努力，找到了解决的方法，用反向代理。

二、反向代理的原理和能解决的问题

2.1什么是跨域呢？

跨域问题的出现是因为浏览器的同源策略问题，所谓同源:就是两个页面具有相同的协议（protocol），主机（host）和端口号（port），它是浏览器最核心也是最基本的功能，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击。

当，协议名，域名，端口号，三者有一个不同都会发生跨域问题。

这里强调一点：发生了跨域，并不是请求没有发送出去，它是请求发送成功了，并且服务端也给你把数据返回了，但是浏览器为了安全性给拒绝了。

2.2反向代理的原理

代理服务是指内部网络对Internet发出连接请求，需要制定代理服务将原本直接传输至Web服务器的HTTP发送至代理服务器中。换句话来说，代理服务就是网络信息的中转站。代理服务器作为浏览器与Web服务器之间的另一类服务器，配备代理服务器，浏览器无需直接至Web服务器获取网页，只需向代理服务器发出所需的请求，由代理服务器传送给访问者所需的浏览器。普通的Web代理服务器仅支持内部网络的访问请求，反向代理服务与普通的代理方法并不存在明显冲突。如果一个代理服务器可以代理外部网络主机访问内部网络，这类代理服务模式称之为反向代理服务。

反向代理的工作原理是，代理服务器来接受客户端的网络访问连接请求，然后服务器将请求有策略的转发给网络中实际工作的业务服务器，并将从业务服务器处理的结果，返回给网络上发起连接请求的客户端。

就好比：

当你拨打10086，每次都是不同的客服在接听，我们也不需要关心电话那边是谁，只要能够解答问题即可

这里10086总机号码就是我们说的反向代理。我们作为客户方，不知道真正提供服务的人是谁

也就是说，反向代理隐藏了真实的服务端

三、VUE中反向代理的配置

1. 找到vue.config.js文件，如果没有就自己手动配置。

2. 配置反向代理

3. 之后在request.js中，将环境变量baseURL配置为

之后正常配置接口，调取接口就可以了！

但是：

开发阶段才会使用proxy反向代理，线上项目一般是使用nginx来实现

4. 这里插一下，由于我访问的是图片，返回的数据和正常的数据不一样，所以在配置接口的时候：指定返回数据类型是“Blob”。

5. 最后在页面调用：

“Bolb”数据类型在后台显示是这样的

在这个时候，图片我们已经拿到了

但是在页面我们还无法显示，想要展示出来我们需要转换。

所以这里再插一下：解决这个数据类型的方法

转换为url：

转换为base64格式：

两种都可以直接放在img标签的src中的

只不过打印出来

url长这个样子：

而base64是这个样子的：

两个方法展示出来的效果是一样的。所以用哪个都就可以！

好啦！

到此我的问题就解决了，我所能分享的也就这些了！

最后在此强调一下，这篇文章仅限于我在我现在项目中遇到的问题，解决的方法，不够严谨和专业，所以在实践中若遇到什么问题就请就实际问题解决，请不要批评这篇文章！

在此感谢各位的阅读，鞠躬！撒花！