关于浏览器跨域的一种实现--jsonp
最近一直在搞python,前端技术荒废很久了,今天跟前端联调,设计到一个前端跨域的问题;前端人员告诉我可以用jsonp的方式实现,经他这么一提醒,也是豁然开朗。
jsonp的实现方式我按照我的理解说一下:
在浏览器层面上,有一个同源策略,这个策略限制了,一个域下的网页,去get一个其他域下的数据,做到不同域之间的数据隔离。
但是html里面有写元素是可以获取其他域下的数据,比如,<img src='x x x.com/img/xxx/xxx.jpg' /> img标签就可以获取外域下的图片资源,
同理,<script> 是可以获取外域下的脚本代码的:<script src='text/javascript' src='http://xxxx.com/xxxx/action.do?callback=showdata'/>
服务器收到请求后,先封装页面想要的数据作为参数,然后使用callback传上的参数作为函数名,返回一段javascript脚本:
would_data = getData() #封装数据
callback = request.callback #获取回调函数
return 'callback("%s")' % would_data #返回一段脚本
客户端本地构造请求url:http://xxxx.com/xxxx/action.do?callback=showdata ,其中showdata在本地预先定义一个,参数为想要的数据,这样当去服务器远程获取数据后,
会自动调用本地的回调函数,会已传参的方式,获取到数据。这整个是jsonp的实现原理,其实并没有多么高深,我之前也怀疑过为什么不能去外域请求数据,但却可以获取到
像<img><srcirt><css>这用的标签去访问外域数据,早研究下,就知道有这个好东西了。 ^ ^
其实,像jquery这种框架早就支持这个东西了,type='jsonp' 就可以了,也不用带回调函数参数
关于浏览器跨域的一种实现--jsonp的更多相关文章
- [1.6W字] 浏览器跨域请求限制的详细原理分析&寻找一种最简单的方式实现XHR跨域(9种方法, 附大招可以纯前端实现跨域!)
Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...
- [Java面试十]浏览器跨域问题.
此块内容参考Ajax文档部分. 主要复习内容: 1.JavaScript核心对象 2.浏览器BOM对象 3.文档对象模型DOM 4.常见事件 5.Ajax编程( ...
- ajax处理跨域有几种方式
一.什么是跨域 同源策略是由Netscape提出的著名安全策略,是浏览器最核心.基本的安全功能,它限制了一个源(origin)中加载文本或者脚本与来自其他源(origin)中资源的交互方式,所谓的同源 ...
- 设置IE浏览器跨域访问数据
在开发中,经常会遇到多站点跨域访问后台服务获取数据的情况,解决方法有两种 自己写代理服务,访问代理服务,代理服务请求服务获取数据再返回: 设置浏览器可以跨域访问数据. 本文来讲如何设置IE浏览器跨域访 ...
- 解决浏览器跨域限制方案之JSONP
一.什么是JSONP JSONP即:JSON with Padding,是一种解决因浏览器跨域限制不允许访问跨域资源的方法. JSONP是一个非官方的协议,它允许在服务器端返回javascript标签 ...
- 浏览器跨域请求之credentials
-时间起源- 前段时间,需要弄个简单的网站出来,访问远程的api服务. 我是这么做的.首先是在搭建一个nodejs服务来运行前端页面.在我请求登录的时候,能成功返回相应的成功信息.然后,当我再次请求读 ...
- 深入浅出:了解jsonp跨域的九种方式
什么是“”跨域”: 跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.由于安全原因,跨域访问是被各大浏览器所默认禁止的.当一个域与其他域建立了信 ...
- vue开发环境和生产环境里面解决跨域的几种方法
什么是跨域 跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu. ...
- php跨域的几种方式
PHP实现跨域的几种形式 1.JSONP(JSON with padding)原理 利用html里面script标签可以加载其他域下的js这一特性,使用script src的形式来获取其他域下的数据, ...
随机推荐
- iOS socket常用数据类型转换
int -> data /** int -> data */ + (NSData *)intToData:(int)value { Byte byte[4] = {}; byte[0] = ...
- vue 配置了全局的http拦截器,单独某个组件不需要这个拦截器,如何设置
之前写过关于全局配置http拦截器的随笔,现在有个需求,在微信支付时,生成二维码,页面显示一个遮罩层,二维码页面需要每两秒请求一次接口,若返回结果为已支付,则进行页面跳转,但因为全局http中load ...
- 【Spring学习】【Java基础回顾-数据类型】
Java基础回顾过程中,之前对于Java相关基础知识都是从这个人的博客看一些,那边的内容看一下,觉得不够系统化,决定用xmind脑图的形式,将Java基础知识回顾的作为一个系列,当前正在做的会包含: ...
- SQL Server数据库中的系统数据库?
SQL Server的系统数据库分为:master,model,msdb和tempdb 1.Master数据库 Master数据库记录SQL Server系统的所有系统级别信息(表sysobjects ...
- Spring常用注解总结(2)
@Autowired "自动填装",作用是为了消除代码JAVA代码里面的getter/setter与bean属性中的property. @Autowired默认按类型匹配的方式,在 ...
- 解决在vscode中eslint在vue后缀文件中保存时无法自动格式化的问题
在setting.json中加入如下内容 { "eslint.autoFixOnSave": true, "eslint.validate": [ " ...
- SQLServer 中有五种约束, Primary Key 约束、 Foreign Key 约束、 Unique 约束、 Default 约束和 Check 约束
一直在关注软件设计方面,数据库方面就忽略了很多,最近在设计数据库时遇到了一些小麻烦,主要是数据库中约束和性能调优方面的应用,以前在学习 Sql Server 2000,还有后来的 Sql Server ...
- 安装pygame出现is not a supported wheel on this platform解决办法
安装python库pygame时出现如下错误: 查看python的版本是否与之匹配,发现版本不匹配问题 例如1.我的python3.6是32位的,就只能安装cp36的:结果发现安装还是出现问题: 2. ...
- 201621123002《JAVA程序设计》第十四周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 用 ...
- 图解Go的channel底层原理
废话不多说,直奔主题. channel的整体结构图 简单说明: buf是有缓冲的channel所特有的结构,用来存储缓存数据.是个循环链表 sendx和recvx用于记录buf这个循环链表中的发送或者 ...