Nginx 反向代理解决跨域问题

起因

为了更好的分工，项目实施了前后端分离，分离后前后端代码部署不同的服务器，拥有不同的域名,在前端代码中ajax直接访问后端服务的动态数据，就会涉及到跨域不能访问的问题，解决跨域有很多种方案，为了尽可能的减少改动量，我们采用了Nginx反向代理的方式解决这个问题。

流程图

流程分析

1.由浏览器发起请求，请求a.com下的静态资源，比如a.com/index.html

2.请求到a.com域名下的nginx机器，nginx判断请求url，a.com/index.html通过匹配发现是html静态资源

3.4,5 步骤nginx从本地前端项目中找到对应的静态资源，并返回给浏览器，这里返回的静态资源包含html,js等静态资源文件

6.浏览器载入html,js等文件，载入过程中页面会发起ajax请求动态数据，受到跨域的限制，这里ajax请求也是a.com,比如a.com/api/query

7.ajax请求到a.com域名下的nginx机器，nginx判断url，a.com/api/query，通过匹配发现是动态请求

8.根据nginx配置动态请求被转发，前端服务器nginx转发请求到后端服务器域名b.com/api/query

9,10,11步骤后端服务器nginx请求后端服务并返回结果给前端服务器nginx

12.前端服务器nginx收到后端服务器返回，将结果返回到浏览器

浏览器接收到动态数据，进一步通过js渲染，进而展现出动态数据，完整的数据页面展示在用户面前。

在浏览器的整个请求过程中，浏览器只与a.com进行数据交换，并不知道b.com的存在

所以浏览器侧，不存在跨域问题，而前端服务器的nginx对动态请求转发到后端服务器，我们称前端服务器nginx对后端服务器进行了反向代理

总结

此种方案以最小的代价实现了前后端分离，我们需要做的仅仅是对动态请求、静态请求进行区分，进一步使得nginx能够代理动态请求；但所有的动态数据都是ajax请求得到的，客户端难免会发起很多的请求，增加了客户端与服务端的交互次数，浏览器展示数据的速度可能会受一定的影响。