Jsonp实现跨域原理

首先在讲Jsonp跨域之前，要先来介绍一下什么是跨域。

跨域就是：

当协议，ip/域名，端口有任何不同，都被当成跨域。跨域发生的时机是请求，响应回来之后。浏览器主动监测是否跨域。跨域的本质是请求成功了，响应也成功了。但是由服务端响应回来的数据被浏览器拦截。检测出跨域，抛异常。因此跨域并不影响一次成功的请求。在跨域之前请求已经执行完毕了。

解决跨域的方式有两种，一种是客户端解决跨域，一种是服务端解决跨域。

客户端解决跨域是Jsonp

Jsonp是一种跨域解决方案。

Jsonp跨域其实是利用了src的属性特点。

img，script都有src属性。利用标签中的src属性，不受到跨域限制的特点。可以拿到外部资源。

img虽然可以跨域。但是它只是拿资源回来。并没有进一步做任何js的动作。

只有script标签，会把云上面的资源拿回来。并且把云上面的资源内容作为js代码运行。

也就是说能被我们利用的漏洞就只有script一个。

接下来说一下Jsonp核心点：

就是利用script标签，可以跨域请求云端的资源。并且把云端的资源请求到本地。把资源作为脚本来运行

用jsonp做一个登录测试：

就是前端script的src发起跨域请求。拼接参数，账号以及密码。然后向后端发起请求。后端接收响应之后，返回的时候。返回给我们一个方法名（形参，想要传的参数放里面）。这时候我们在前端写好一个方法名（接收后端传过来的东西）。当后端的数据返回的时候。我们会发现前端接收的其实是一个函数方法。而前端的script里面存在这个方法。所以返回函数。就相当于执行了script里面的那个方法。

succes(user)

Jsonp实现跨域原理相关推荐

【网络安全】浅析跨域原理及如何实现跨域
前言我们在解决一个问题的时候应该先去了解这个问题是如何产生的,为什么会有跨域的存在呢?其实,最终的罪魁祸首都是浏览器的同源策略,浏览器的同源策略限制我们只能在相同的协议.IP地址.端口号相同,如果有 ...
jsonp跨域原理_【网站技术解读①】Javascript实现跨域请求
推荐一个读者做的不错的编程学习网站: 网站:潜安域名:http://www.qianani.com 另外将会不定期推送近期网站用到的一些技术,讲一些核心原理,今天为第一篇问题由来: 最近一直在优化 ...
JSON和JSONP【JS+AJAX跨域原理和实现】
前言由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socke ...
jsonp实现跨域问题
以前对于跨域问题,仅仅是知道通过创建script解决,根本没有深入的了解.经过几次的面试,个人觉得有必要去弄清楚jsonp跨域的原理和使用.下面与大家分析我的学习所得.(参考http://www.no ...
ajax同时调用两个jsonp,使用JSONP进行跨域Ajax 调用
JSONP 是啥 JSONP 全称是JSON with Padding. 当需要进行跨域Ajax 调用的时候, 需要用到JSONP 协议. 客户端 $.ajax({ url: 'http://xxx' ...
js跨域解决方案php,详解js跨域原理以及2种解决方案_javascript技巧
1.什么是跨域我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本 ...
jQuery中getJSON跨域原理详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解前几天我再开发一个叫河蟹工 ...
使用 JSONP 实现跨域通信，第 2 部分: 使用 JSONP、jQuery 和 Yahoo! 查询语言构建 mashup...
使用 JSONP 实现跨域通信,第 2 部分: 使用 JSONP.jQuery 和 Yahoo! 查询语言构建 mashup 使用 JSONP 实现跨域通信,第 2 部分: 使用 JSONP.jQue ...
ajax跨域原理以及解决方案
ajax跨域原理以及解决方案参考文章: (1)ajax跨域原理以及解决方案 (2)https://www.cnblogs.com/bojuetech/p/5895767.html (3)https: ...

Jsonp实现跨域原理

Jsonp实现跨域原理相关推荐

最新文章

热门文章