前端解决跨域

在平常的项目开发时会不可避免的须要进行跨域操做，面试中也是频繁被常常会问到的问题，本文只是我常常用到的解决跨域的方式作个记录与总结。

全部支持Javascript的 浏览器 都会使用‘同源策略’这个安全策略，所谓同源是指，域名，协议，端口相同，就是由于同源策略的影响致使无法直接用XMLHttpRequest请求不一样域上的数据，因此各类解决问题的技术出现了。

Jsonp

<script> 标签元素是不受同源策略影响，OK，利用这一个漏洞，能够实现加载不一样域服务器上的脚本啦。该协议的一个要点就是容许用户传递一个callback参数给服务端，而后服务端返回数据时会将这个callback参数做为函数名来包裹住JSON数据，这样客户端就能够随意定制本身的函数来自动处理返回数据了。
以jquery封装的$.getJson()为例：

<script type="text/javascript">
    $.ajax({
             type: "get",
             url: "http://www.test.com?name='test'",
             dataType: "jsonp", 
             jsonpCallback:"callbackFun",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也能够写"?"，jQuery会自动为你处理数据
             success: function(json){
                 alert('success');
             },
             error: function(){
                 alert('fail');
             }
         });
     });
</script>

经过dataType指定jsonp,jquery底层封装后，会在head标签后面追加<script src="http://www.test.com?name='test'&callback=callbackFun"></script>

全部的jsonP都是这个原理，借助script标签的跨域特性来实现，callbackFun再jquery中是自动生成的，后台会获取jsoncallback参数，获取对应的函数名称，最后包装成想要的格式，好比最后输出结果是：callbackFun({"result":"suc","code":"1000"})，那么再Jquery中，会将该方法直接指定给success方法，最后来接收返回的数据。

JSONP的优势是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中均可以运行，不须要XMLHttpRequest或ActiveX的支持；而且在请求完毕后能够经过调用callback的方式回传结果。
JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种状况，不能解决不一样域的两个页面之间如何进行JavaScript调用的问题。

cors

CROS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CROS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功仍是失败。CORS须要浏览器和服务器同时支持。目前，全部浏览器都支持该功能，IE浏览器不能低于IE10。
前端实现方式和通常的ajax请求是同样的，只是方式的接口是绝对地址。服务器端对于CORS的支持，主要就是经过设置Access-Control-Allow-Origin来进行的。若是浏览器检测到相应的设置，就能够容许Ajax进行跨域的访问。

JSONP只支持GET请求，CORS支持全部类型的HTTP请求。JSONP的优点在于支持老式浏览器，以及能够向不支持CORS的网站请求数据。

服务器代理

禁止跨域问题实际上是浏览器的一种安全行为，假如咱们的目标服务器不能设置header,并且咱们须要发送post请求，上面的解决方案就被否认了，可是服务器与服务器之间的请求是不存在跨域的。

强大的nginx，伟大的nodeJS均可以实现一个代理服务器功能。

反向代理服务器，就是把http请求转发到另外一个或者一些服务器上。经过把本地一个url前缀映射到要跨域访问的web服务器上，就能够实现跨域访问。对于浏览器来讲，访问的就是同源服务器上的一个url。而nginx经过检测url前缀，把http请求转发到后面真实的物理服务器。并经过rewrite命令把前缀再去掉。这样真实的服务器就能够正确处理请求，而且并不知道这个请求是来自代理服务器的。

nginx的配置方法网上已经泛滥了，保存几个参考过的网址。
http://www.imooc.com/article/...
http://www.cnblogs.com/renjin...
http://www.cnblogs.com/bninp/...

nodeJs 主要是使用的node-http-proxy实现的，相关信息也不少。
https://github.com/nodejitsu/...
http://www.cnblogs.com/woodk/...
http://blog.csdn.net/jaye100/...