使用Nginx进行反向代理用于解决前端跨域问题

最近写完了静态，准备向后端拿API直接拿数据做渲染测试，但是却因为跨域问题，造成了浏览器无法获取后端获取的数据 具体报错如下：

XMLHttpRequest cannot load http://www.example.com
No 'Access-Control-Allow-Origin' header
is present on the requested resource.

这个问题也一直干扰我很久了，也用过诸如JSONP,后端设置CORS等方法。

这次最开始的想法是：因为跨域限制仅存在于浏览器，而真正的后端(java)由于安全考虑是不会设置CORS的，那么我就通过一个node中间层去获取java后端的数据，然后在node设置CROS，这样我前端直接请求node的话，是可以拿到数据的。

具体的一次request-response为：

1. 前端请求node

2. node接受请求，并向java请求

3. java返回给node数据

4. node返回给前端

当时想着正好可以练下Node，就没有考虑其他更好的解决方案，也马上开始用express搭了一个简陋的node，然后跑了一下，数据能拿到。好的，没问题了。

接下来的半天继续根据后台的api写着路由，拿数据没有任何的问题，当涉及到登录保存token的时候，问题终于出现了：

当写到登录/注册的时候采用的是token验证，后端在http response body 里面回传token，并且在response header里设置set-cookie，我当然想着node拿到token并且在响应前端请求的时候在header里写入set-cookie就可以了，但是，又出现了跨域问题：

先解释下什么同域的要求

1. 协议相同

2. 域名相同

3. 端口相同

我的node服务在本地的3000端口，前端静态文件服务在1258端口，这就造成了set-cookie因跨域问题而造成的set失败，node无法跨域给1258端口set-cookie，从而无法实现token登录验证

（虽然可以通过sessionStorage/localStorage的方法间接实现token认证，但是走到这里，基本上算是小题大作了，杀鸡用了宰牛刀）

没办法只能请教boss了，boss给我介绍了nginx，简直就是跨域问题的大杀器。

回到正题，nginx是什么

来自百度百科：Nginx (engine x) 是一个高性能的HTTP和反向代理服务器。

先说说什么是正向/反向代理

1. 正向代理：代理网络用户去取得网络信息。形象的说：它是网络信息的中转站。

2. 反向代理：代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器。

按照我的理解，正向代理就像是你找一跑腿的帮你取快递而不用自己去，反向代理则像是你给10086打电话的时候，10086帮你分配接线员一样的模式。值得注意的是，正向代理的话，服务器无法知道你的真实IP，反向代理的话，用户是无法知道究竟是哪一台服务器在为他服务。

所以，为什么nginx可以解决跨域问题？

因为现在我可以这么做：

1. 让前端路由的所有路径都在~/static/*下，全部转发至前端静态文件的1258端口

2. 让node的服务放在~/server/*下，也可以直接~/*，全部转发至3000端口

最后nginx做服务器容器（例如监听80端口）开启的服务使得两者被整合到了同域（因为满足同协议，域名，端口）

甚至，直接废掉写的node服务

1. 前端监听端口不变

2. /*直接代理转发至java后台，根本不存在跨域问题

配置流程

网上教程一大堆

配置文件解释