nginx反向代理解决浏览器跨域问题

1. 背景

最近在实现一个页面中加载直播视频的小功能，客户只给了直播流地址，是基于http协议的HLS格式视频。使用h5播放该地址会出现了跨域的问题，去网上看了很多资料，特在此总结。如有不足，欢迎留言指正。

2. 跨域原因

跨域出现的根本原因是浏览器的同源策略。浏览器为了安全考虑，只允许在同一协议、同一域名、同一端口下进行通信，否则就无法访问。

3. 跨域的解决方案

3.1 CORS（跨域资源共享）

跨源资源共享 (CORS) 是一种基于HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。

个人认为CORS是解决跨域问题最简单粗暴的方法。只要在要访问的服务器头部添加许可（Access-Control-Allow-Origin: http://your ip），允许不同源的浏览器访问就可以了。也可以直接Access-Control-Allow-Origin: ‘*’，允许所有外部地址访问，但是这样会存在安全问题。

3.2 nginx反向代理

1. nginx介绍（正向代理、反向代理、负载均衡）

相对来说，nginx是解决跨域问题的可行方案。在介绍之前，先了解一下相关概念。

• 正向代理
  先举个例子，假如我现在没办法访问百度，而另一台服务器可以，我先访问这台服务器，然后通过这台服务器访问百度，这样通信就完成了。但是百度并不知道访问它的实际用户是谁，这样相当于隐藏了客户端。

• 反向代理
  假如我现在可以访问百度，但是百度服务器压力太大，把我的请求转到了其他服务器进行处理，这就是返校代理。对于客户来说，并不知道他访问的到底是哪个服务器，隐藏了服务端。

• 负载均衡
  上面的反向代理可以很好的实现负载均衡，减轻服务器压力。当众多用户访问一个域名的时候，他可以根据需要转发到其他的服务器，这样就可以减小服务器压力，加快访问速度。

2. nginx反向代理解决跨域的思路

反向代理解决跨域的总体思路就是基于nginx的代理服务器，全部通信全部通过它进行。假设当前域名为http://a.com资源需要访问域名为http://b.com的资源，此时nginx代理服务器地址与a同源，但是为a.XXX,服务器在监听到改地址后自动转发为b的地址。
这部分参考如下文章，写的很详细https://segmentfault.com/a/1190000012859206

3. nginx解决跨域具体步骤

具体步骤见https://www.cnblogs.com/mollie-x/p/10463140.html