跨域技术(JSONP与CROS)
JSONP
我们发现,Web页面上调用js文件时不受是否跨域的影响,凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>。那就是说如果要跨域访问数据,就服务端只能把数据放在js格式的文件里。恰巧我们知道JSON可以简洁的描述复杂数据,而且JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据。然后客户端就可以通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件。客户端在对JSON文件调用成功之后,也就获得了自己所需的数据。这就形成了JSONP的基本概念。允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
function dll(response){
alert(response.city);
}
var script=document.createElement("script");
script.src="http://freegeoip.net/json/?callback=dll";
document.body.insertBefore(script,document.body.firstChild);
三步走:创建script、指定src,插入到文档。
jQuery支持JSONP的调用。在另外的一个域名中指定好回调函数名称,就可以用下面的形式来就加载JSON数据。
url?callback=?
jQuery.getJSON(url + "&callback=?", function(data) {
alert(data.a + data.b);
});
服务端当然也要提供JSONP的支持,其实只要提供读写callback这个params就可以了。
跨域资源共享(CORS)
Cross-Origin Resource Sharing (CORS) 是W3c工作草案,它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方,从而决定请求或响应成功与否。
CORS与JSONP相比,更为先进、方便和可靠。
1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。
2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS。
对一个简单的请求,没有自定义头部,要么使用GET,要么使用POST,它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部(协议,域名,端口),这样服务器可以很容易的决定它是否应该提供响应。
服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。
Header set Access-Control-Allow-Origin *
为了防止XSS攻击我们的服务器, 我们可以限制域,比如
Access-Control-Allow-Origin: http://blog.csdn.net
很多服务都已经提供了CORS支持,比如 AWS 支持跨域资源分享功能CORS,向S3上传不需要代理。
跨域技术(JSONP与CROS)的更多相关文章
- js-其他跨域技术(JSONP`Comet)
###1. JSONP JSONP由两部分组成:回调函数和数据 JSONP是通过动态<script>元素来使用的,使用时可以为src属性指定一个跨域URL eg: function ha ...
- 跨域技术-jsonp
JSONP是JSON with padding 的简写,其有两个部分组成,一个是回调函数,一个是数据,其基本格式如下 function handleResult(result){ alert(resu ...
- 循序渐进Python3(十一) --6-- Ajax 实现跨域请求 jsonp 和 cors
Ajax操作如何实现跨域请求? Ajax (XMLHttpRequest)请求受到同源策略的限制. Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外 ...
- 跨域利器JSONP(转)
何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...
- Ajax跨域:Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- 前端跨域解决方案: JSONP的通俗解说和实践
对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...
- jQuery(三) javascript跨域问题(JSONP解决)
加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...
- 浏览器同源策略,跨域请求jsonp
浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...
- 跨域Ajax -- jsonp和cors
跨域Ajax - jsonp - cors 参考博客: http://www.cnblogs.com/wupeiqi/articles/5703697.html http://www.cnblogs. ...
- jquery跨域解决方案JSONP
1.在互联网中我们的计算机是通过IP来定位的,但是IP比较难记忆,因此通过domain name(域名)来取代IP 2.什么是跨域? (1)默认浏览器为了安全问题,禁止了xmlhttprequest跨 ...
随机推荐
- ECharts在柱状图的柱子上方显示数量的方法
在setOption()方法中的series配置中加上itemStyle配置 如下: series: [{ name: '人数', type: 'bar', data: [], //x轴对应列的值 i ...
- ECS配置lamp环境
1.安装apache 1.1 安装apache [root@nmserver-7 ~]# yum install httpd httpd-devel 1.2 启动apache服务 [root@nmse ...
- HJ212 CRC 16 (C#)
算法 CRC16 校验寄存器赋值为 0xFFFF: 取被校验串的第一个字节赋值给临时寄存器: 临时寄存器与 CRC16 校验寄存器的高位字节进行"异或"运算,赋值给 CRC16 校 ...
- codeforces611C
New Year and Domino CodeForces - 611C 他们说:“每一年都像多米诺骨牌,一个接一个地倒下去”.但是,一年能够像多米诺骨牌那样放在网格中吗?我不这么认为. Zydsg ...
- Nginx 反向代理如何连接上游服务器
L:92 想上游服务器先建立TCP连接 如三次握手 下面指令可以控制握手时间 proxy_next_upstream 指令当出现502可以换个上游服务器 Tcp keepalive 一般都是由进程在 ...
- 前端base64、baseurl加解密和RSA加解密
由于项目最近要进行安全测试,前端的用户和密码都是明文数据传送给后台那里,其实这样很很不安全的,容易泄露个人信息和密码.中间服务器的同事就提出,可以通过前端接收公钥,利用公钥对密码进行加密,把加密过密码 ...
- HTC Vive 基础入门 基于Unity3D引擎
任务2: 01-概述 07:08 任务3: 02-HTC Vive设备的安装 08:33 任务4: 03-下载Steam与SteamVR 03:05 任务5: 04-使用Steam VR 调试设备 1 ...
- Bootstrap 框架
一,Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局, ...
- Marriage Match IV HDU - 3416(最短路 + 最大流)
题意: 求有多少条最短路 解析: 正着求一遍最短路 得dis1 反着求一遍得 dis2 然后 遍历所有的边 如果 dis1[u] + dis2[v] + w == dis1[B], 则说明这是一 ...
- bzoj 1086: [SCOI2005]王室联邦 (分块+dfs)
Description “余”人国的国王想重新编制他的国家.他想把他的国家划分成若干个省,每个省都由他们王室联邦的一个成员来管理.他的国家有n个城市,编号为1..n.一些城市之间有道路相连,任意两个不 ...