同源策略与jsonp

前端之家收集整理的这篇文章主要介绍了同源策略与jsonp前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

同源策略

浏览器对运行其中的javascript代码设置了诸多安全性限制,其中包括同源策略

简单来说,就是默认情况下,来自于A源的js代码,无法访问B源的document,也无法向B源发送ajax请求

源的定义包括协议,主机,端口号,比如http://www.example.com和http://www.example.com:8080就是不同的源。因此,http://www.example.com/index.html加载的index.js中的代码,默认情况下不能向http://www.example.com:8080/users发送ajax请求,但是可以发往http://www.example.com/users

重要的是,一段js代码属于哪个源,并不是看它是从哪里加载的,而是看它是被谁加载的

举个例子,很多页面引用angular,jquery等js框架时,并不从自己的服务器上获取js文件,而是从公共的CDN上获取。比如说某网站www.abc.com,使用angular作为前端MVC框架,那么它的angular.js来自google CDN

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>

这种情况下,angular.min.js虽然来自https://ajax.googleapis.com,但是它是属于www.abc.com这个源,可以往此服务器上的REST服务,webservice,servlet发送ajax请求,但是反而不能往https://ajax.googleapis.com上发送任何请求

jsonp

这个限制有时候是需要被违反的,比如news.abc.com和games.abc.com虽然是不同的源,但是是同一个域的不同子站点,互相之间的通信被允许是合情合理的。这种场景下,就需要有办法来克服同源策略的限制

现在的方法有很多种,包括html5里的postMessage方法等。jsonp也是其中的一种方法

原理上,就是通过把请求构造在<script src>的地址中,其中拼接好目标服务的URL和参数,比如:

<script src="http://games.abc.com/user/123456"></src>

浏览器认为这是一个普通的js加载请求,而不是一个ajax请求,于是就会向src发起http get请求,而在games.abc.com,这个服务返回的响应是一段js代码,于是当news.abc.com的js代码得到响应之后,就可以取出代码并执行

业界的通常做法,这个响应里包含的是请求发起页面的js方法名,以及用来表示数据的json,请求方对这段json进行解析(parse),因此这种跨域请求的做法,被称为jsonp

猜你在找的Json相关文章