1 同源策略

所谓同源策略，指的是浏览器对不一样源的脚本或者文本的访问方式进行的限制。好比源a的js不能读取或设置引入的源b的元素属性。javascript

那么先定义下什么是同源，所谓同源，就是指两个页面具备相同的协议，主机（也常说域名），端口，三个要素缺一不可。html

能够看下面的几个示例来更加清楚的了解一下同源的概念：java

URL1	URL2	说明	是否容许通讯
http://www.foo.com/js/a.js	http://www.foo.com/js/b.js	协议、域名、端口都相同	容许
http://www.foo.com/js/a.js	http://www.foo.com:8888/js/b.js	协议、域名相同，端口不一样	不容许
https://www.foo.com/js/a.js	http://www.foo.com/js/b.js	主机、域名相同，协议不一样	不容许
http://www.foo.com/js/a.js	http://www.bar.com/js/b.js	协议、端口相同，域名不一样	不容许
http://www.foo.com/js/a.js	http://foo.com/js/b.js	协议、端口相同，主域名相同，子域名不一样	不容许

同源策略限制了不一样源之间的交互，可是有人也许会有疑问，咱们之前在写代码的时候也经常会引用其余域名的js文件，样式文件，图片文件什么的，没看到限制啊，这个定义是否是错了。其实否则，同源策略限制的不一样源之间的交互主要针对的是js中的XMLHttpRequest等请求，下面这些状况是彻底不受同源策略限制的。node

页面中的连接，重定向以及表单提交是不会受到同源策略限制的。连接就不用说了，导航网站上的连接都是连接到其余站点的。而你在域名www.foo.com下面提交一个表单到www.bar.com是彻底能够的。
跨域资源嵌入是容许的，固然，浏览器限制了Javascript不能读写加载的内容。如前面提到的嵌入的<script src="..."></script>，<img>，<link>，<iframe>等。固然，若是要阻止iframe嵌入咱们网站的资源(页面或者js等)，咱们能够在web服务器加上一个X-Frame-Options DENY头部来限制。nginx就能够这样设置add_header X-Frame-Options DENY;。

既然有这么多的状况是没有同源策略限制的，那么一般的跨域问题从何而来呢？转到下一节跨域问题。python

2 跨域问题

这一节来讨论下跨域问题，固然前置条件是咱们在WEB服务器或者服务端脚本中设置ACCESS-CONTROL-ALLOW-ORIGIN头部，若是设置了这些头部并容许某些域名跨域访问，则浏览器就会跳过同源策略的限制返回对应的内容。此外，若是你不是经过浏览器去获取资源，好比你经过一个python脚本去调用接口或者获取js文件，也不在这个限制以内。jquery

2.1 Ajax跨域

经过ajax调用其余域的接口会有跨域问题。好比下面的例子，我在http://www.foo.com/index.html中经过ajax调用请求http://www.bar.com/js/test.js页面，此时是会报错的。nginx

XMLHttpRequest cannot load http://www.bar.com/js/test.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.foo.com' is therefore not allowed access.

这是由于咱们的WEB服务器没有设置ACCESS-CONTROL-ALLOW-ORIGIN头部，默认状况下是禁止跨域引用资源的。固然这里有一点要注意，其实这个跨域请求是发送成功了的，服务器也有返回test.js内容，只是浏览器禁止Javascript去取response的数据而已。若是要设置ACCESS-CONTROL-ALLOW-ORIGIN头部，nginx能够使用下面的代码web

add_header 'Access-Control-Allow-Origin' 'http://www.foo.com'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET,POST';

另外，咱们看到直接经过Javascript去取iframe中的元素也是会报错的，由于域名不一样。报错以下所示ajax

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://www.foo.com" from accessing a frame with origin "http://foo.com". 
The frame being accessed set "document.domain" to "foo.com", but the frame requesting access did not. Both must set "document.domain" to the same value to allow access.

这时由于咱们的主域名相同，所以能够在index.html和test.html中设置document.domain='foo.com'来访问iframe中的元素。注意，是两个域名下面的文件都要设置，即使是一样的主域名。固然这是特例，若是是两个彻底不一样的域名，是没有办法的，你不能把www.foo.com的domain设置成www.163.com。sql

此外，在index.html里面也能够看到经过<script>,<iframe>等标签都是能够跨域内嵌资源的。

# index.html
<!DOCTYPE html> <html> <head> <title>test cross domain</title> <script src="/js/jquery.js"></script> <script src="http://www.bar.com/js/test.js"></script> <script> $(function(){ document.domain = 'foo.com'; //1 注释掉则会报错 var ifr = document.getElementById("testframe"); ifr.onload = function(){ var doc = ifr.contentDocument || ifr.contentWindow.document; alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue); } }); $.ajax("http://www.bar.com/js/test.js"); //2 报错 </script> </head> <body> <h1>Test Cross Domain</h1> <iframe id="testframe" src="http://foo.com/test.html"></iframe> </body> </html>

固然还能够经过iframe，location.hash，window.name，HTML5的postMessage等方法来实现跨域资源访问，更多内容参见Rain Man的这篇文章 JavaScript跨域总结和解决办法。

2.2 JSONP跨域访问

JSONP也是开发中常见到的内容，在jquery中就有封装，经过ajax请求多带上一个jsonp的参数便可。JSONP也可以实现跨域访问资源，可是它的实现原理其实跟ajax没有多少关系，它是经过动态插入<script>标签来实现跨域资源访问的，由于根据前面内容咱们已经知道，嵌入跨域资源浏览器是容许的。

下面经过一个简单的例子来讲明JSONP的原理。
两个文件，第一个是http://www.foo.com/jsonp.html，经过动态建立script标签加载了http://www.bar.com/js/outer.js文件，而后outer.js文件返回的内容正好是一个函数调用，如此，实现了数据传递和回调过程。固然，实际的jsonp接口中，会让你传一个函数名过去，而后返回的数据中回调函数名就是你传的函数名，回调函数的参数则是封装的json格式。jQuery中的jsonp实现原理基本就是这样，更详细的jsonp原理能够参见这篇大做深刻浅出JSONP。

# jsonp.html
<script type="text/javascript"> function callback(data) { alert(data.message); } function addScriptTag(src){ var script = document.createElement('script'); script.src = src; document.body.appendChild(script); } window.onload = function(){ addScriptTag("http://www.foo.com/js/outer.js"); } </script> # outer.js callback({message:"success"});

也谈谈同源策略和跨域问题

2 跨域问题

2.1 Ajax跨域

2.2 JSONP跨域访问