1. 什么是同源策略
理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。
何谓同源:
URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。
同源策略:
浏览器的同源策略，限制了来自不同源的"document"或脚本，对当前"document"读取或设置某些属性。 （白帽子讲web安全[1]）
从一个域上加载的脚本不允许访问另外一个域的文档属性。
举个例子：
比如一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。
在浏览器中，<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源，而不受同源限制，但浏览器限制了JavaScript的权限使其不能读、写加载的内容。
另外同源策略只对网页的HTML文档做了限制，对加载的其他静态资源如javascript、css、图片等仍然认为属于同源。
:8080/test.html <html> <head><title>test same origin policy</title></head> <body> <iframe src="https://localhost:8081/test2.html"></iframe> <script type="text/javascript"> document.getElementById("test").contentDocument.body.innerHTML = "write somthing"; </script> </body> </html> :8081/test2.html <html> <head><title>test same origin policy</title></head> <body> Testing. </body> </html>
在Firefox中会得到如下错误：
Error: Permission denied to access property 'body'
Document对象的domain属性存放着装载文档的服务器的主机名，可以设置它。
例如来自"blog.csdn.net"和来自"bbs.csdn.net"的页面，都将document.domain设置为"csdn.net"，则来自两个子域名的脚本即可相互访问。
出于安全的考虑，不能设置为其他主domain，比如不能设置为sina.com
2. Ajax跨域
Ajax (XMLHttpRequest)请求受到同源策略的限制。
Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互，另外XMLHttpRequest是一个纯粹的Javascript对象，这样的交互过程，是在后台进行的，用户不易察觉。
因此，XMLHTTP实际上已经突破了原有的Javascript的安全限制。
举个例子：
假设某网站引用了其它站点的javascript，这个站点被compromise并在javascript中加入获取用户输入并通过ajax提交给其他站点，这样就可以源源不断收集信息。
或者某网站因为存在漏洞导致XSS注入了javascript脚本，这个脚本就可以通过ajax获取用户信息并通过ajax提交给其他站点，这样就可以源源不断收集信息。
如果我们又想利用XMLHTTP的无刷新异步交互能力，又不愿意公然突破Javascript的安全策略，可以选择的方案就是给XMLHTTP加上严格的同源限制。
这样的安全策略，很类似于Applet的安全策略。IFrame的限制还仅仅是不能访问跨域HTMLDOM中的数据，而XMLHTTP则根本上限制了跨域请求的提交。（实际上下面提到了CORS已经放宽了限制）
随着Ajax技术和网络服务的发展，对跨域的要求也越来越强烈。下面介绍Ajax的跨域技术。
2.1 JSONP
JSONP技术实际和Ajax没有关系。我们知道<script>标签可以加载跨域的javascript脚本，并且被加载的脚本和当前文档属于同一个域。因此在文档中可以调用/访问脚本中的数据和函数。如果javascript脚本中的数据是动态生成的，那么只要在文档中动态创建<script>标签就可以实现和服务端的数据交互。
JSONP就是利用<script>标签的跨域能力实现跨域数据的访问，请求动态生成的JavaScript脚本同时带一个callback函数名作为参数。其中callback函数本地文档的JavaScript函数，服务器端动态生成的脚本会产生数据，并在代码中以产生的数据为参数调用callback函数。当这段脚本加载到本地文档时，callback函数就被调用。
第一个站点的测试页面（:8080/test.html）：
<script src="https://localhost:8081/test_data.js"> <script> function test_handler(data) { console.log(data); } </script>
服务器端的Javascript脚本（:8081/test_data.js）：
test_handler('{"data": "something"}');
为了动态实现JSONP请求，可以使用Javascript动态插入<script>标签：