javascript跨域：什么是跨域，如何跨域(转载自小胡子哥)

---恢复内容开始---

　　无数次看到：Origin null is not allowed by Access-Control-Allow-Origin , 网络没有让你绝望，可是或许会让你蛋疼，由于你找了半天没看到一个比较实用的解决方案，亦或者水平不够，别人写的东西累赘没看懂，抑或是。。。

　　网上看到了一篇文章——跨域资源共享的10中方式，已经放在本身的家里了O(∩_∩)O~

　　跨域也是平时项目中比较让人头疼的一个玩意儿，上文只是简要地提出了有哪些跨域方式，这里呢，将向你们详细说明，各类使用频率比较高的跨域方式。

　　什么是跨域：

A cross-domain solution (CDS) is a means of information assurance that provides the ability to manually or automatically access or transfer between two or more differing security domains.

　　上面是从wiki上引用过来的。意思是：解决两个安全域之间的信息传递，这个就叫作CDS——跨域解决方案。首先解释下怎么样的两个域之间的数据传输须要跨越。

 

What [什么是跨域]

　　JavaScript出于安全方面的考虑，不容许跨域调用其余页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了很多麻烦。这里把涉及到跨域的一些问题简单地整理一下：

　　首先什么是跨域，简单地理解就是由于JavaScript同源策略的限制，a.com 域名下的js没法操做b.com或是c.a.com域名下的对象。更详细的说明能够看下表：

URL	说明	是否容许通讯
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	容许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不一样文件夹	容许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不一样端口	不容许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不一样协议	不容许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不容许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不一样	不容许
http://www.a.com/a.js http://a.com/b.js	同一域名，不一样二级域名（同上）	不容许（cookie这种状况下也不容许访问）
http://www.cnblogs.com/a.js http://www.a.com/b.js	不一样域名	不容许

 

same-origin policy [同源策略]

　　在客户端编程语言中，如javascript和ActionScript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操做另一个域的绝大部分属性和方法。

　　那么什么叫相同域，什么叫不一样的域呢？当两个域具备相同的协议(如http), 相同的端口(如80)，相同的host（如www.example.org)，那么咱们就能够认为它们是相同的域。好比http://www.example.org/和http://www.example.org/sub/是同域，而http://www.example.org, https://www.example.org, http://www.example.org:8080, http://sub.example.org中的任何两个都将构成跨域。同源策略还应该对一些特殊状况作处理，好比限制file协议下脚本的访问权限。本地的html文件在浏览器中是经过file协议打开的，若是脚本能经过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前IE8还有这样的隐患。

　　受到同源策略的影响，跨域资源共享就会受到制约。可是随着人们的实践和浏览器的进步，目前在跨域请求的技巧上，有不少宝贵经验的沉淀和积累。这里我把跨域资源共享分红两种，一种是单向的数据请求，还有一种是双向的消息通讯。

 

　JSONP（JSON with padding）是JSON的一种“使用模式”，它是非官方协议容许在服务器端集成Script tags返回至客户端，经过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

　　P.S：

　　　　1.楼主懂一点点php，因此DEMO中的后台语言就用PHP来演示。

　　　　2.为了方便测试，楼主弄了SAE和BAE。

 

Prelude [前奏]

　　若是咱们请求一个JSON数据：（SAE地址：http://qianduannotes.sinaapp.com/test/testData_1.json）

//一个简单的json数据
{
    "name" : "靖鸣君",
    "sex"    : "男",
    "hobby": "女"
}

　　报个什么错，你们应该知道了吧~ 

Origin null is not allowed by Access-Control-Allow-Origin

　　先解释下这个null是个什么东东。不少人在测试的时候是在没有诸如apache、IIS环境下运行的程序，也就是在本地运行，此时origin就是null，全部Access-Control-Allow-Origin这个东西不容许源null请求数据。固然若是你测试的时候在apache下运行，那这里的null就会变成你的IP了~

 

Then [接着]

　　JSONP，咱们开始入题吧~ 

　　先说说后台返回个什么东西：（SAE地址：http://qianduannotes.sinaapp.com/test/CDS_jsonp.json）

<?php
    $fun = $_GET["woo"];  //先假设woo对应的是 trigger ；
    $ctt = "靖鸣君";
    echo $fun . "(" . $ctt . ")";
?>

　　后台数据解析以后就是这样的：

trigger(木子Vs立青)

　　有人就要开始惊叹了，肿么是 木子Vs立青 ，没有引号包住？？是的，没有引号，当$ctt是一个json数据的时候，咱们获得的结果就是：

trigger(JSON)

　　而后用一些熟知的方法来解析这些JSON（下次会讲解如何解析JSON）。

　　说了半天仍是没讲客户端的操做，O(∩_∩)O~  不急不急。

<script type="text/javascript" src="http://qianduannotes.sinaapp.com/test/CDS_jsonp.php?woo=trigger"></script>
<script type="text/javascript">
    function trigger(obj){
　　　　//注：这里只是随便写的一个函数，obj是为解析的。
　　　　//obj = parse(obj);
　　　　document.getElementById("container").innerHTML = obj;
　　}
</script>

　　习惯上jsonp请求时，会使用jsonp为参数，即jsonp=trigger，我以为都无所谓啦，只要你用的爽就行。

　　若是你想传更多参数，那也是同样的：

<script type="text/javascript" src="http://qianduannotes.sinaapp.com/test/CDS_jsonp.php?woo=trigger&a=va&b=vb&c=vc"></script>

 

Attention [注意事项]

　　1.第一也是最重要的：JSONP不提供错误处理。若是动态插入的代码正常运行，你能够获得返回，可是若是失败了，那么什么都不会发生。你没法得到一个404的错误，也不能取消这个请求。

　　2.另一个重要的缺点是若是使用了不信任的服务会形成很大的安全隐患。

---恢复内容结束---