1、前言

相信各位同为初学者的前端程序猿盆友们，在和后端对接的时候都被跨域问题折磨过吧（说的就是我，试了无数种方法都没有用，濒临崩溃边缘）

终于，后面在师兄的帮助下，终于通过学习设置Nginx反向代理彻底解决了跨域问题！

无论是csdn还是稀土掘金，对Nginx配置的讲解感觉大部分都对初学者不太友好。因此希望这一篇博客能帮助更多前端盆友们（后端也行） 在遇到前端成长之路绝对会遇到的一头拦路虎（跨域问题） 时，能够更加从容简单地解决！

2、认识跨域

想要明白前后端对接时为什么会出现跨域问题，我们需要先知道跨域是什么

跨域是浏览器受同源策略（协议相同、域名相同、端口相同） 的限制，不允许不同源的站点之间进行某些操作（如发送Ajax请求）。如果不通过进行一些特殊配置是解决不了的。

因此，就需要通过设置Nginx反向代理来解决跨域问题

3、认识反向代理（故事介绍）

那么，反向代理是什么呢？

反向代理：又下图可知，客户端对代理是无感知的。解决跨域问题只需要服务器端配置好反向代理服务器并将请求发送到服务器，由反向代理服务器去选择目标服务器获取数据后返回客户端。此时对于客户端来说，反向代理服务器与目标服务器是同一个服务器，只是对服务器端来说，暴露于客户端的是反向代理的地址，而不是真实服务器IP地址

给大家讲这么一个小故事来介绍反向代理叭！

小怡暗恋同班的校草小蔡，但是自己又很害羞，不敢去主动找小蔡说话，又希望把自己写的情书给小蔡，于是托自己的好朋友小瑶帮自己送情书给小蔡。因此小瑶在一次课间偷偷把情书放在了小蔡的课桌里面。但小怡忘记署名了，因此小蔡在收到情书的时候并不知道是谁送的。

以上故事中，小怡、小瑶与小蔡之间的关系，就是服务器端、反向代理服务器与客户端之间的关系。

为什么这么说呢？对故事的解析如下

小怡等同于服务器端，小瑶等同于反向代理服务器，小蔡等同于客户端。而小怡想要把情书给小蔡等同于服务器端想要将请求发送给客户端。 但是小怡害羞，是通过小瑶把情书给到小蔡的 ，这等同于服务器端由于跨域问题不能够直接给客户端发送请求，需要设置反向代理服务器，通过反向代理服务器间接将请求发送给客户端 。而由于小怡没有署名而使得小蔡不知道情书是谁写的，等同于客户端对代理是无感知的。