jsonp与cors跨域的一些理解(转)

CORS其实出现时间不短了,它在维基百科上的定义是:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。 它是一个妥协,有更大的灵活性,但比起简单地允许所有这些的要求来说更加安全。

而W3C的官方文档目前还是工作草案,但是正在朝着W3C推荐的方向前进。

简言之,CORS就是为了让AJAX可以实现可控的跨域访问而生的。

浏览器的同源策略,即是浏览器之间要隔离不同域的内容,禁止互相操作

比如,当你打开了多个网站,如果允许多个网站之间互相操作,那么其中一个木马网站就可以通过这种互相操作进行一系列的非法行为,获取你在各个网站的相关信息,很明显这是不安全的,所以同源策略避免了很多这样的问题。

但是同时也带来了一些问题,比如有时候你想通过自己的网站去获取另一个自己的网站的一些资料信息,但是由于两者域名不同,所以就被同源策略隔离了,那么这个时候就需要了解一下浏览器的跨域问题。

跨域常见的两种方式,分别是jsonp和新推出的cors,即cross-origin resourse sharing,其实这货出现的时间也不短了,只是我现在才注意到而已。

先说说jsonp,先说个简单的例子再讲百度的例子。

我们有个www.a.com的页面

<script type="text/javascript"
src="http://www.b.com?name=qiangzi"></script>
<script type="text/javascript">
function jsonp(json){
    alert(json[‘age’]);
}
</script>

这是请求 http://www.b.com?name=qiangzi 返回的js文件。

jsonp({‘name‘:‘qiangzi‘,‘age‘:20});

事先声明,个人没有实际的使用过jsonp去进行跨域操作,所以所有的分析都是猜想,若有不对请指出。

我们来试着去分析上面的代码,a页面事先写好了一个回调函数,即是供我们请求回的js回调的函数,这里的回调函数式alert参数组中的年龄。

我们再看我们的请求,首先我们的请求是写在script标签里面的,所以说明正常来说我们请求回来的内容应该是一段js文件。接着看,我们发现请求的时候同时传了一个参数过去name="qiangzi",所以我们基本可以猜测在www.b.com服务器那边,接收到a页面的请求,同时接收到传过来的name数据,根据这个数据进行相应的查询,找到了{name:"qiangzi",age:20}这样的一段数据之后,我们的b服务器于是就构造了一段这样的js文件传给请求的页面

jsonp({‘name‘:‘qiangzi‘,‘age‘:20});

也就是在原页面输出我们请求的name对应的年龄。很明显,我们请求的script标签中的src不能写死,而应该是一个动态的插入name值的过程。

从前台写好回调函数,到根据请求的参数值构造请求链接,跨域服务器根据链接进行相应处理返回数据并执行回调函数,这整一个过程就是jsonp的过程,当然上述只是我个人猜想,毕竟没有去实现过,所以有错望大神们指出。

那么我们按照这个思路再来看看百度搜索下拉框的jsonp跨域操作。

我们在百度搜索框输入jsonp,马上出现了下拉框,分别有jsonp json jsonp跨域等等,其实这一过程就是使用到了jsonp跨域处理,具体怎么过跨法,我们打开F12,找到network这里可以看到这样的一个请求

也就是这个链接

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=jsonp&json=1&p=3&sid=19637_18286_1442_17711_18240_17944_19568_19806_19558_19808_19843_19861_17001_15825_12254&req=2&bs=xmlhttprequest&pbs=jsonp&csor=5&pwd=json&cb=jQuery1102032008872299992563_1463242088002&_=1463242088035

点击我们可以看到这样的一段东西

那么这样的一段东西其实是什么呢?其实这就是我们jsonp跨域请求回来的数据以及调用的函数。

接下来就按照我们刚才的思路分析下整个过程。

首先,百度在前台写好了一个回调函数,即是接收跨域返回来的数据并且出现下拉框,把数据填充到下拉框中。当我们在百度搜索的输入框(注意区分开此处的输入框和上句话中的下拉框)输入我们要搜索的内容时,此时百度页面马上获取我们输入的值,并构造请求,即我们上文中提到的

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=jsonp&json=1&p=3&sid=19637_18286_1442_17711_18240_17944_19568_19806_19558_19808_19843_19861_17001_15825_12254&req=2&bs=xmlhttprequest&pbs=jsonp&csor=5&pwd=json&cb=jQuery1102032008872299992563_1463242088002&_=1463242088035

对于这一段请求,我个人看着都觉得有点怕怕的,所以为了方便理解jsonp我们简化下应该可以这样理解

https://sp0.baidu.com/su?wd=jsonp

服务器查询jsonp对应的联想关键词,并把这些关键词填充在一个数组中,然后把这个数组作为参数调用前台写好的回调函数,返回这段js文件给前台,然后我们就看到了在搜索框输入jsonp然后下拉框出现一系列关键词的功能。

至此,关于jsonp的例子讲诉差不多结束。那么jsonp有哪些优缺点呢?

jsonp的优点是兼容所有的浏览器,无论是主流的还是以前的。而它的缺点则是由于jsonp发起的请求是get方式的,即参数是填充在请求地址上,所以这种方式发送的数据有限制。

关于jsonp再补充点内容,其实不知道大家有没有想过,我们使用的很多API接口,调用他们返回的数据,其实这一过程就是跨域了,因为我们请求的是别的站点的数据,不做跨域处理我们是不可能获得信息的,只是有时候我们是按着API说明文档照写的所以忽视了这个

我这里有个国外的API,根据填写的邮编搜索邮编所对应的位置信息

http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?

在这个API中我们需要填写三个参数,一个是邮编号码,另一个是对应的国家,而第三个就是我们的回调函数。

这个是该API接口返回的数据

整个API调用的过程就是,我们在前台写好一个callback函数,这个callback函数的功能就是根据我们的需求而写,然后在构造请求的时候把这个callback函数的名称写在请求对应的callback上。至于其他的邮编号码国家这些当然也是在我们前台页面构造的。构造完这些请求之后,当我们发起请求的时候,API服务器端就会根据我们的请求信息,拿到相应的数据,并把这些数据放到我们写的回调函数对应的参数中传回来,并进行调用,整个API调用完毕。

说完了jsonp,接下来说说cors跨域这玩意。

在前文看到同源策略的时候,不知道大家有没有想过,难道就不能让两个跨域的站点写一个秘密的协议,达成一种交易从而使得两者可以进行跨域操作获取数据之类的吗?嗯,我个人觉得cors做的就是这件事。

关于cors在维基百科上的定义是这样的:跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。它是一个妥协,有更大的灵活性,但比起简单地允许所有这些的要求来说更加安全。

要想实现cors跨域,需要做的就是两件事,一个是我们的浏览器要支持cors跨域这一操作(主流谷歌和火狐均支持,ie版本要高于ie10才行),另外,我们的服务器端必须要设置好Access-Control-Allow-Origin从而支持跨域操作。

cors相对于jsonp而言的好处就是支持所有的请求方式,不止是get请求,还支持post,put请求等等,而它的缺点就很明显,无法兼容所有的浏览器,对于要兼容到老式浏览器而言,还是使用jsonp好点。

http://www.cnblogs.com/jelly7723/p/5494330.html

时间: 2024-10-12 20:32:01

jsonp与cors跨域的一些理解(转)的相关文章

jsonp与cors跨域的一些理解

浏览器的同源策略,即是浏览器之间要隔离不同域的内容,禁止互相操作. 比如,当你打开了多个网站,如果允许多个网站之间互相操作,那么其中一个木马网站就可以通过这种互相操作进行一系列的非法行为,获取你在各个网站的相关信息,很明显这是不安全的,所以同源策略避免了很多这样的问题. 但是同时也带来了一些问题,比如有时候你想通过自己的网站去获取另一个自己的网站的一些资料信息,但是由于两者域名不同,所以就被同源策略隔离了,那么这个时候就需要了解一下浏览器的跨域问题. 跨域常见的两种方式,分别是jsonp和新推出

关于CORS跨域问题的理解

起因 因为这段时间一个项目前后端分别部署在不同服务器的需要,抽空学习了一下CORS问题,不足之处,欢迎指教. 什么是CORS CORS是一个w3c标准,全称是"跨域资源共享"(Cross-origin resource sharing),但一个请求url的协议,域名,端口三者之间任意与当前页面地址不同即为跨域.它允许阅览器向跨源服务器发送XMLHttpRequest请求,从而客服AJAX只能同源使用的限制. CORS简介 浏览器默认的安全限制为同源策略,即JavaScript或Cook

Web API 实现JSONP或者安装配置Cors跨域

前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想也是心痛不已,水太深了,摸索原理关键是太枯燥和乏味了,但是呢,从情感上还是挺乐意去摸索原理,而情绪上不太乐意去探究原理,于是乎,本文就由此诞生了,借此文缓解下枯燥的心情和压抑的情绪.后续继续摸索原理. 接下来我们要讲的就是利用JSONP和利用Cors这两种方式来实现跨域,请看下文..... JSON

Web API之手动实现JSONP或者安装配置Cors跨域(七)

前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想也是心痛不已,水太深了,摸索原理关键是太枯燥和乏味了,但是呢,从情感上还是挺乐意去摸索原理,而情绪上不太乐意去探究原理,于是乎,本文就由此诞生了,借此文缓解下枯燥的心情和压抑的情绪.后续继续摸索原理. 接下来我们要讲的就是利用JSONP和利用Cors这两种方式来实现跨域,请看下文..... JSON

CORS跨域资源共享你该知道的事儿

"唠嗑之前,一些客套话" CORS跨域资源共享,这个话题大家一定不陌生了,吃久了大转转公众号的深度技术好文,也该吃点儿小米粥溜溜胃里的缝儿了,今天咱们就再好好屡屡CORS跨域资源共享这个话题,大牛怡情小牛巩固,把这碗前端经久不凉的大碗茶,再细细的品一品. "JSONP直接了当很豪爽,CORS细吮慢品大补汤" 在咱们前端的日常工作中,跨域比较常用的方式就是JSONP,JSONP呢就是通过script标签无同源限制的特点,在获取到需要的资源后自动执行回调方法的方式,而我

解决ajax请求cors跨域问题

”已阻止跨源请求:同源策略禁止读取位于 ***** 的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin').“ ”已阻止跨源请求:同源策略禁止读取位于 ******的远程资源.(原因:CORS 请求失败).“ 在项目中或者练习中经常遇到ajax请求跨域的问题,除了可以用jsonp的请求模式,并且在后台支持回调的方式以外,还可以通过简单的配置webconfig文件或者IIS,解决该问题. 一.通过修改配置文件解决CORS跨域问题 在配置文件中的webse

Api之Cors跨域以及其他跨域方式

Web Api之Cors跨域以及其他跨域方式(三) 我们知道ajax不能跨域访问,但是有时我们确实需要跨域访问获取数据,所以JSONP就此诞生了,其本质使用的是Script标签,除JSONP以外还有另外实现跨域方式 一.手动实现JSONP跨域 1.首先创建一个Web项目,在这里我使用一般处理程序 1 public class Demo : IHttpHandler 2 { 3 public void ProcessRequest(HttpContext context) 4 { 5 //接收参数

Java实现CORS跨域请求

问题 使用前后端分离模式开发项目时,往往会遇到这样一个问题 -- 无法跨域获取服务端数据 这是由于浏览器的同源策略导致的,目的是为了安全.在前后端分离开发模式备受青睐的今天,前端和后台项目往往会在不同的环境下进行开发,这时就会出现跨域请求数据的需求,目前的解决方案主要有以下几种: JSONP.iframe.代理模式.CORS等等 前面几种方式在这里不讲,网上有很多资料.在这里我主要分享一下CORS这种解决方式,CORS即"跨域资源共享",它允许浏览器向跨源服务器,发出XMLHttpRe

一篇文章搞明白CORS跨域

面试问到数据交互的时候,经常会问跨域如何处理.大部分人都会回答JSONP,然后面试官紧接着就会问:"JSONP缺点是什么啊?"这个时候坑就来了,如果面试者说它支持GET方式,然后面试官就会追问,那如果POST方式发送请求怎么办?基础扎实一些的面试者会说,使用CORS跨域,不扎实的可能就摇摇头了. 这还没结束,如果公司比较正规或者很在乎技术功底,你面试的又是重要岗位,HR还想砍你的工资,就会再补一刀,CORS跨域有什么问题呢?这时候能回答上来的就没几个了,就算是你答出来兼容性不好,需要I