三分钟通过nginx反向代理解决前端跨域问题

前言

前后端分离开发的过程中，跨域问题一定避免不了。关于如何解决跨越问题，已经是老生常谈了，cors，jsonp，nginx，proxyTable，但是这里真正应用于项目中的一般都是cors和nginx，一次配置，无需修改。而cors需要后端小哥哥配合，人家不一定愿意屌你，所以使用nginx似乎是绝佳选择~
那么今天的目标就是，3分钟完成nginx反向代理实现跨域的配置。

---

下载安装

首先上官网下载对应自己电脑配置的nginx，我下的是Windows版本。

下载完毕之后，解压。

假设你网速慢，1.4m的东西花了1分钟来下载，我们还剩2分钟。

---

打开文件

打开conf文件夹，找到nginx.conf文件，使用编辑器打开该文件。

打开文件后，可以看到一堆默认配置和英文，往下翻，找到server这里。

这里我也假设你手速慢，花了1分钟解压并找到文件，我们还剩最后1分钟。

---

配置文件

在server的前面或者后面，按照server的格式，配置如下红线框处的内容。
代码不多，不算符号其实就5行，下面就讲解一下这5行代码在你自己的项目中如何替换。

第一行，9001是项目经过nginx反向代理之后运行的端口，你可以随便填，只要不冲突就行。
第二行，设置nginx服务器根目录页面，这里就设置为你的前端项目主机地址加端口。可以理解为nginx服务器的端口是9001，打开9001端口页面后，呈现出的页面就是你的前端项目页面。如果这里不设置，打开9001会有一个默认的nginx欢迎页，但是这样就无法通过反向代理实现跨域了。
第三行，所有通过nginx反向代理的请求，都必须有一个公共的url部分，这样才便于统一操作。所以这里我前端项目设置的baseUrl就是/demoapi，因此这里也只需要代理所有以/demoapi开头的请求。
第四行，前面监听到了所有以/demoapi开头的请求，这里就需要进行操作，如果满足该正则匹配，则会进行请求地址的重写（重定向）。
第五行，设置重定向的地址，这里当然就填写后台的api接口地址了。需要注意的是这里有一个/不能漏了。

设置完毕，保存代码。
打字咱手都快，这里算50秒不过分吧，还剩10秒。

启动

双击nginx.exe，赶紧启动程序。你会看到一个害羞的dos窗口一闪而过，没错，就是这样子启动了。查看一下你的项目，随便发一个请求，看看是否还存在跨域情况（当然没有了啊）。

如何确定nginx是否成功启动了呢，而不是我眼睛眨了一下？那就要去任务管理器查看。

同理，关闭也是在这里关闭。如果你是后端大佬，并且会编写bat脚本这些，那么可以通过脚本开关nginx。如果你写的脚本很好用，那么请联系我，给我也发一份2333

最后推荐一篇文章，详解了正向代理和反向代理。

Nginx正向代理与反向代理 https://www.jianshu.com/p/ae76c223c6ef