Nginx的反向代理跨域
1.6k6OTHERnginx2017-12-01

什么是跨域?

跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,或是a页面为ip地址, b页面为域名地址,所进行的访问行动都是跨域

产生的原因?

浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源

同ip(或domain),同端口,同协议视为同一个域,一个域内的脚本仅仅具有本域内的权限,可以理解为本域脚本只能读写 本域内的资源,而无法访问其它域的资源。这种安全限制称为同源策略

现代浏览器在安全性和可用性之间选择了一个平衡点。 在遵循同源策略的基础上,选择性地为同源策略“开放了后门”。例如img script style等标签,都允许垮域引用资源,然而, 你也只能是引用这些资源而已,并不能读取这些资源的内容

同源策略限制以下几种行为:

1.Cookie、LocalStorage 和 IndexDB 无法读取

2.DOM 和 Js对象无法获得

3.AJAX 请求不能发送

常见跨域场景

http://www.domain.com/a.jshttp://www.domain.com/b.js 同一域名,不同文件或路径 允许http://www.domain.com/lab/c.jshttp://www.domain.com:8000/a.jshttp://www.domain.com/b.js 同一域名,不同端口 不允许http://www.domain.com/a.jshttps://www.domain.com/b.js 同一域名,不同协议 不允许http://www.domain.com/a.jshttp://192.168.4.12/b.js 域名和域名对应相同ip 不允许http://www.domain.com/a.jshttp://x.domain.com/b.js 主域相同,子域不同 不允许http://domain.com/c.jshttp://www.domain1.com/a.jshttp://www.domain2.com/b.js 不同域名 不允许

跨域解决方案

1、 通过jsonp跨域

2、 document.domain + iframe跨域

3、 location.hash + iframe

4、 window.name + iframe跨域

5、 postMessage跨域

6、 跨域资源共享(CORS)

7、 nginx代理跨域

8、 nodejs中间件代理跨域

9、 WebSocket协议跨域

nginx反向代理解决跨域

正向代理:代理位于网站和客户端中间, 客户端无法访问某网站,就将请求发送给代理服务器,代理从网站取回来再发送给客户端,网站并不知道为谁提供服务

反向代理:客户端访问某网站的一个页面, 但是网站并没有,就偷偷从另外一台服务器上取回来,然后作为自己的内容吐给用户,用户不知道真正提供服务的是谁

对于浏览器来说,访问的就是同源服务器上的一个url。而nginx通过 检测url前缀,把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确 处理请求,并且并不知道这个请求是来自代理服务器的。

简单说,nginx服务器欺骗了浏览器,让它认为这是同源调用,从而解决了浏览器的跨域问题。又通过重写url,欺骗了真实 的服务器,让它以为这个http请求是直接来自与用户浏览器的。

1
2
3
4
5
Location/carrots-admin-ajax/{

proxy_passhttp://dev.admin.carrots.ptteng.com/;

}

proxy_pass把请求代理到其他主机

两种写法hhttp://dev.admin.carrots.ptteng.com/http://dev.admin.carrots.ptteng.com

如果访问url=http://server/html/test.jsp,则被nginx代理后

情况1: 将test/作为根路径,请求test/路径下的资源。

情况2: 则被nginx代理后,请求路径会变为http://proxy_pass/test.jsp,直接访问server的根资源。

/carrots-admin-ajax/

是一个匹配规则,用于拦截请求,匹配任何以/proxy/html/开头的地址,匹配符合以后,停止往下搜索正则。

对于浏览器来说,访问的就是同源服务器上的一个url。而nginx通过检测url前缀,把http请求转发到后面真实的物理服务器。并通过rewrite命令把前缀再去掉。这样真实的服务器就可以正确处理请求,并且并不知道这个请求是来自代理服务器的。

简单说,nginx服务器欺骗了浏览器,让它认为这是同源调用,从而解决了浏览器的跨域问题。又通过重写url,欺骗了真实的服务器,让它以为这个http请求是直接来自与用户浏览器的。

nginx rewrite指令执行顺序:

1.执行server块的rewrite指令(这里的块指的是server关键字后{}包围的区域,其它xx块类似)

2.执行location匹配

3.执行选定的location中的rewrite指令

如果其中某步URI被重写,则重新循环执行1-3,直到找到真实存在的文件

如果循环超过10次,则返回500 Internal Server Error错误

参考文章

参考一:https://www.cnblogs.com/gabrielchen/p/5066120.html

参考二:http://blog.csdn.net/shendl/article/details/48443299

其他问题

Q:例如img script style等标签,都允许垮域引用资源?

A:在浏览器中,并且加载的方式其实相当于一次普通的GET请求,唯一不同的是,为了安全起见,浏览器不允许这种方式下对加载到的资源的读写操作,而只能使用标签本身应当具备的能力(比如脚本执行、样式应用等等)。

Q:JSONP和nginx跨域有什么不同

JSONP和nginx是完全不同的 是可以跨域的,而且在跨域脚本中可以直接回调当前脚本的函数

原理:是可以跨域的,而且在跨域脚本中可以直接回调当前脚本的函数

script标签是可以加载异域的JavaScript并执行的,通过预先设定好的callback函数来实现和母页面的交互。它有一个大名,叫做JSONP跨域,JSONP是JSON with Padding的略称。它是一个非官方的协议,明明是加载script,为啥和JSON扯上关系呢?原来就是这个callback函数,对它的使用有一个典型的方式,就是通过JSON来传参,即将JSON数据填充进回调函数,这就是JSONP的JSON+Padding的含义。JSONP只支持GET请求。

欢迎留言交流  (´▽`ʃ♡ƪ)