一个小故事彻底讲懂Nginx设置反向代理解决跨域问题----初学者必看

1、前言

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

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

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

2、认识跨域

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

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

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

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

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

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

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

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

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

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

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

4、怎么配置Nginx反向代理（超详细有用）

相信通过这么一个小故事，各位都对设置反向代理有初步认识了吧，那么接下来便是如何设置Nginx反向代理的操作：

（1）下载Nginx

Nginx官方下载网址：nginx: download

下载成功后解压压缩包，解压后打开文件夹：

（2）启动Nginx

打开后点击nginx.exe，会出现一闪而过的黑屏，这是很正常的！点击了就行了！ 然后此时nginx反向代理服务器就会在后台服务器中打开，可点击Ctrl+shift+esc在任务管理器中查看后台进程

（3）设置Nginx代理

服务器端：123.207.32.32:1888/api/city/all

 客户端：使用postman模拟客户端向服务器端发送请求

postman下载链接：https://www.getpostman.com/downloads/

下载注册完成后，即可按以下操作使用postman模拟客户端：

此时可以通过postman模拟客户端对123.207.32.32:1888/api/city/all 发送请求，能够正常返回数据

下载postman后，即可开始配置Nginx

配置Nginx：

①在压缩后的文件夹中找到nginx.conf，打开

②找到listen server_name部分

这一部分的意思是Nginx设置默认的反向代理服务器是localhost:80。可以在浏览器打开localhost或者localhost:80打开反向代理服务器

打开后：

配置服务器在下面location proxy_pass这个部分：

解释：

这一部分的操作是给123.207.32.32:1888/api/city/all设置反向代理服务器。 此时意味着：

http:localhost:80/text_api/api/city/all 等同于 http:123.207.32.32:1888/api/city/all

此时可以在postman，将服务器端的地址改为http://localhost:80/test_api/api/city/all ，也可以成功返回数据

此时跨域问题就完美解决啦！ 有什么问题欢迎各位在评论区提出！