Search K
Appearance
Nginx解决跨域实战
解决跨域的方式有很多种，今天博主主要将Nginx通过反向代理来解决跨域。
正向代理和反向代理的区别
引用一个知乎上的的总结： 作者：华为云开发者社区 链接：https://www.zhihu.com/question/36412304/answer/2254739842 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
正向代理：正向代理通常情况下我们所说的代理都是指正向代理，例如一些网络加速器等等。正向代理时，由客户端发送对某一个目标服务器的请求，代理服务器在中间将请求转发给该目标服务器，目标服务器将结果返回给代理服务器，代理服务器再将结果返回给客户端。
使用场景：
访问被禁止的资源（让客户端访问原本不能访问的服务器。可能是由于路由的原因，或者策略配置的原因，客户端不能直接访问某些服务器。为了访问这些服务器，可通过代理服务器来访问）突破网络审查（比如谷歌、youtube…）再比如客户端IP被服务器封禁，可以绕过IP封禁也可以突破网站的区域限制
隐藏客户端的地址 对于被请求的服务器而言，代理服务器代表了客户端，所以在服务器或者网络拓扑上，看不到原始客户端
进行客户访问控制 可以集中部署策略，控制客户端的访问行为（访问认证等）记录用户访问记录（上网行为管理）内部资源的控制（公司、教育网等）
加速访问资源 使用缓冲特性减少网络使用率（代理服务器设置一个较大的缓冲区，当有外界的信息通过时，同时也将其保存到缓冲区中，当其他用户再访问相同的信息时， 则直接由缓冲区中取出信息，传给用户，以提高访问速度。）
过滤内容（可以通过代理服务器统一过滤一些危险的指令/统一加密一些内容、防御代理服务器两端的一些攻击性行为）
反向代理: 服务器根据客户端的请求，从其关系的一组或多组后端服务器（如Web服务器）上获取资源，然后再将这些资源返回给客户端，客户端只会得知代理服务器的IP地址，而不知道在代理服务器后面的服务器集群的存在。
负载均衡 如果服务器集群中有负荷较高者，反向代理通过URL重写，根据连线请求从负荷较低者获取与所需相同的资源或备援。可以有效降低服务器压力，增加服务器稳定性
提升服务器安全性 可以对客户端隐藏服务器的IP地址也可以作为应用层防火墙，为网站提供对基于Web的攻击行为（例如DoS/DDoS）的防护，更容易排查恶意软件等
加密/SSL加速 将SSL加密工作交由配备了SSL硬件加速器的反向代理来完成
提供缓存服务 加速客户端访问，对于静态内容及短时间内有大量访问请求的动态内容提供缓存服务
数据统一压缩 节约带宽,为网络带宽不好的网络提供服务
统一的访问权限控制
突破互联网的封锁 突破谷歌访问封锁,也就是说，不需要客户端进行代理，我们通过谷歌代理网站（该代理服务器可以访问谷歌，而我们可以访问该公开的代理服务器），也可以突破封锁。
为在私有网络下 （如局域网）的服务器集群提供NAT穿透及外网发布服务
上传下载减速控制
Nginx反向代理解决跨域
接下来博主就以自己的服务器来实战，举个栗子🌰🌰：
假设我们有个Vue打包后的dist资源，我们现在将它放在http://101.43.17.174:8848下
然后我们dist文件里面的请求地址是：http://101.43.17.174:3000
显然，这种方式不满足浏览器的同源策略，即（域名，端口，协议保持一致），所以就报了跨域的错误。
解决方法
其实仔细一想解决办法很简单，保证静态资源所处的服务器与请求地址所处服务器的域名，端口，协议保持一致即可。
那么顺着这个点思考下去，我们都知道Nginx可以做代理转发，那么我们是否可以这样，使用Nginx配置一个端口作为转发端口，然后请求端口的资源的时候转发到静态资源端口即8848端口，静态资源发起的请求地址改为Nginx配置的端口地址，然后Nginx匹配路径将请求转发到3000端口，即提供服务的端口。假设我们使用8080端口作为转发端口：具体配置如下：
修改了Nginx配置要记得重载配置文件
nginx -s reload然后我们原本访问页面地址为：，现在我们需要改成访问并且我们需要将请求地址由改为，这样的话我们就满足了浏览器的同源策略。
可以看到跨域问题成功解决！！😎😎
需要注意的点
博主也是刚学习Nginx,原本博主以为Nginx配置一个server到端口的时候不会占用该端口，但是其实是占用该端口。上面的例子，博主配置的8080端口就被Nginx占用。
博主在配置Location的时候，匹配/proxy的时候，本以为http://101.43.17.174:8080/proxy/转发到3000端口地址是http://101.43.17.174:3000，结果发现其实是http://101.43.17.174:3000/proxy。