jsonp系列(一)什么是跨域?

首先我们来看一组代码:

http://a.com/index.html下面代码如下;


http://b.com/index.php代码如下:


访问http://a.com/index.html,得到如下结果:


这个错误的意思其实就是:浏览器不允许你从a.com这个网站通过ajax去请求b.com网站里面的内容。

为什么会出现这个错误?

这就要回到浏览器的安全机制上,浏览器有一种安全机制,就是同源策略,所谓同源是指域名,协议,端口相同。现在所有支持JavaScript 的浏览器都会使用这个策略。策略的内容是当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面,当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。

因此上图中的报错,也就有了合理的解释,当a.com页面上的ajax脚本去请求b.com页面上的内容的时候,浏览器会判断这个js的脚本的所属页面与请求的页面否是来自于同一个源(即域名,协议,端口是否相同),如果不是,那么浏览器就会拒绝这个操作,然后弹出报错。

上面的问题中,a.com下面的js脚本去请求b.com下面的页面,这种不同源页面之间的脚本访问,叫做“跨域”;

基于跨域的问题,引出我们今天的主角,jsonp(json with padding的简写,意思是插入的json)。

jsonp是目前使用的比较多的处理方式。

当然,处理这个问题其实有很多种解决方案,比如:

1 flash在xml白名单中添加不同源的站点(具体的不在这里详细描述)

2 通过后端程序做代理的方式,比如a.com下的index.html页面先请求a.com/get.php,a.com/get.php去请求b.com/index.php页面的内容,然后返回给a.com/index.html页面。

3通过jsonp的方式去实现。


接下来,我们主要讲解一下jsonp的原理和实现的方式。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1. 什么是同源策略 同源是指域名、协议、端口相同。同源策略(Same-Origin Policy)是浏览器的一个...
    65_刘璐阅读 4,055评论 0 0
  • 1.什么是同源策略 1.要了解同源策略,我们必须先知道源即orgin 以百度页面为例,谷歌浏览器打开控制台:输入l...
    GarenWang阅读 5,355评论 2 8
  • 问答 1. 什么是同源策略 同源是指域名、协议、端口相同。同源策略(Same-Origin Policy)是浏览器...
    Maggie_77阅读 3,421评论 0 1
  • 由于浏览器的同源策略保护机制,浏览器不能执行来自其他来源的脚本。通过js在不同的域之间进行数据传输或通信,比如用a...
    威少_吴阅读 5,279评论 0 2
  • 问答 1.什么是同源策略 ①源(orgin)的定义 以百度为例,输入localtion.origin就可以得到源P...
    鸿鹄飞天阅读 3,258评论 0 0

友情链接更多精彩内容