跨域异常与nginx的underscores_in_headers on

 

最近上线了一个代理系统,通过nginx代理第三方应用来打通不同区域之间的防火墙限制,从而实现访问策略的一些业务。

期间在系统代理客户某个应用的时候遇到了跨域问题,由于自己的惯性思维的逻辑,导致花费了整整一天的时间才解决,而且还是同事协助完成,所以特此记录,用以警醒!

 

场景再现

 客户环境:

    应用服务器:nginx部署实现负载均衡

    应用涉及的ws服务器:nginx部署实现负载均衡

本地环境:

    代理系统:通过nginx实现代理

具体操作:

    在代理系统分别添加客户应用与ws服务器,通过nginx.conf配置了两个server块来实现。

    结果在浏览器访问客户应用服务器的时候,客户应用通过ajax发送的ws请求全都抛出跨域异常(XMLHttpRequest cannot load ''. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.)。

 

 

关于跨域

 

什么是跨域


跨域访问是浏览器的一种限制, 原因是为了安全问题;

浏览器通过同源策略来实现跨域限制,同源策略是指域名、协议、端口相同才是同一个源;

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

 

场景再现


在遇到跨域问题当时第一反应就是同源策略,想到代理系统配置两个server块来代理,而两个server_name的域名就产生了同源问题,

所以围绕着怎么把客户应用与ws服务器通过一个server块来实现花费了大把时间,关键在于客户ajax请求的ws是全路径,如http://aaa:8080/ws,这在本地发出ajax请求是直接发送给aaa域名的,而客户应用域名又为http://xxx:8080/app,

除非客户的ws请求改成相对路径,如/ws,否则就会出现同源问题;

用户是不可控的,所以一个server块实现的方案根本不可行!

 

纠结半天后退而求其次,想通过在代理的ws服务器设置http头(Access-Control-Allow-Origin)来解决当前客户需求,这样不足之处也是因为不能控制用户是否已经配置了该http头,如果客户添加了,那么我们再次设置的话是有问题的,经过测试,用户的ws服务器确实设置了Access-Control-Allow-Origin,所以最终会抛出异常(XMLHttpRequestcannot load. The 'Access-Control-Allow-Origin' header contains multiple values'*, *', but only one is allowed. Origin '' is therefore notallowed access);

在这里设置Access-Control-Allow-Origin花费了半天时间,因为没设置就会出现最初的跨域异常,设置了相当于两层代理都添加了这个http头信息而导致multiple values'*。

 

CORS协议


 

什么是cors:

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-originresource sharing)。

它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口 ,就可以跨源通信。

在服务器响应客户端的时候,带上Access-Control-Allow-Origin头信息(这个header就是让服务器支持CORS的)。

 

cors常见的header:

Access-Control-Allow-Origin:http://kbiao.me   表明它允许”http://kbiao.me“发起跨域请求
Access-Control-Max-Age:3628800  表明在3628800秒内,不需要再发送预检验请求,可以缓存该结果
Access-Control-Allow-Methods:GET,PUT, DELETE  表明它允许GET、PUT、DELETE的外域请求 
Access-Control-Allow-Headers:content-type 表明它允许跨域请求包含content-type头

 

解决方法


 jsonp 需要目标服务器配合一个callback函数。

iframe 需要目标服务器响应window.name。

CORS 需要服务器设置header :Access-Control-Allow-Origin。

nginx反向代理 不用目标服务器配合,支持所有浏览器。

建议使用nginx。

 

 

underscores_in_headers on 

 

介绍


nginx代理默认会把header中参数的 "_" 下划线去掉,所以后台服务器后就获取不到带"_"线的参数名。

underscores_in_headers on; #该属性默认为off,表示如果header name中包含下划线,则忽略掉。

 

 场景再现


两层代理产生的异常后,发现根本就不是跨域问题,最后全面盘查才发现ws的请求虽然都是200,不过响应的数据都是空的,

原因是ws请求时没有携带参数,而真相就在这里,客户请求的参数包含了"_",nginx默认忽略。

把之前的猜测推倒重来,在代理的两个server块加上underscores_in_headers on,问题至此解决。

 

posted on 2017-10-14 13:19  哎哟~不错哦  阅读(913)  评论(0编辑  收藏  举报

导航