最近一直在搞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. [1.6W字] 浏览器跨域请求限制的详细原理分析&寻找一种最简单的方式实现XHR跨域(9种方法, 附大招可以纯前端实现跨域!)

    Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...

  2. [Java面试十]浏览器跨域问题.

    此块内容参考Ajax文档部分. 主要复习内容:     1.JavaScript核心对象     2.浏览器BOM对象     3.文档对象模型DOM     4.常见事件     5.Ajax编程( ...

  3. ajax处理跨域有几种方式

    一.什么是跨域 同源策略是由Netscape提出的著名安全策略,是浏览器最核心.基本的安全功能,它限制了一个源(origin)中加载文本或者脚本与来自其他源(origin)中资源的交互方式,所谓的同源 ...

  4. 设置IE浏览器跨域访问数据

    在开发中,经常会遇到多站点跨域访问后台服务获取数据的情况,解决方法有两种 自己写代理服务,访问代理服务,代理服务请求服务获取数据再返回: 设置浏览器可以跨域访问数据. 本文来讲如何设置IE浏览器跨域访 ...

  5. 解决浏览器跨域限制方案之JSONP

    一.什么是JSONP JSONP即:JSON with Padding,是一种解决因浏览器跨域限制不允许访问跨域资源的方法. JSONP是一个非官方的协议,它允许在服务器端返回javascript标签 ...

  6. 浏览器跨域请求之credentials

    -时间起源- 前段时间,需要弄个简单的网站出来,访问远程的api服务. 我是这么做的.首先是在搭建一个nodejs服务来运行前端页面.在我请求登录的时候,能成功返回相应的成功信息.然后,当我再次请求读 ...

  7. 深入浅出:了解jsonp跨域的九种方式

    什么是“”跨域”: 跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.由于安全原因,跨域访问是被各大浏览器所默认禁止的.当一个域与其他域建立了信 ...

  8. vue开发环境和生产环境里面解决跨域的几种方法

    什么是跨域   跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu. ...

  9. php跨域的几种方式

    PHP实现跨域的几种形式 1.JSONP(JSON with padding)原理 利用html里面script标签可以加载其他域下的js这一特性,使用script src的形式来获取其他域下的数据, ...

随机推荐

  1. 2019-04(2)Python学习

    一.元组 1.什么是元组? 元组是一个固定长度,不可改变的Python序列对象.创建元组的最简单方式,是用逗号分隔一列值: In [1]: tup = 4, 5, 6 In [2]: tup Out[ ...

  2. Mac 安装 mongoDB

    因Homebrew被墙, 这里使用压缩包安装. 一 从官网下载压缩包 二 解压缩 cd ~/Downloads/ tar -zxvf mongodb-osx-ssl-x86_64-4.0.8.tgz ...

  3. 【转载】路径双反斜杠!!!Python IDLE或Python shell中切换路径 切换目录os.chdir("C:\\python37\\2019pythonshel37\\diedai")

    Python IDLE或shell中切换路径在Python自带的编辑器IDLE中或者python shell中不能使用cd命令,那么跳到目标路径呢.方法是使用os包下的相关函数实现路径切换功能. im ...

  4. 监听端口,获取webService请求报文

    第一步下载我们的wsdl文件到本地 第二步建立一个测试webservice工程,把wsdl放在项目里面 第三步把测试webservice中的wsdlLocation改成localhost.....你的 ...

  5. WebSocket 实现链接 发送消息

    Websocket 原理浅析地址: https://www.cnblogs.com/yuanyongqiang/articles/10457793.html 直接上代码: myWebSocket.py ...

  6. Jenkins+docker自动部署

    项目目录结构如下 对此项目,使用Jenkins构建dockers镜像 步骤如下: 1.安装Jenkins和docker,具体安装步骤,自行度娘把,在此不详述了. 2.Jenkins安装插件Gradle ...

  7. jquery.validate 远程验证remote使用详解

    目的: 试了一下远程验证,试了好几次,得出小结,可以记录下,提醒以防绕路. ----------------直接贴图,省事明了---------------- 1.引用js 2.demo的html & ...

  8. 教程:使用cPanel管理域名和数据库

    cPanel是一个基于web的基于web的控制面板,它简化了许多常见的系统管理任务,如网站创建.数据库部署和管理等.本指南向您展示了如何使用cPanel用户帐户管理域和数据库.所有这些指令都与位于端口 ...

  9. new delate he typedef的含义

    new:        new 类型[初值] 如: new int ;                                     //开辟一个存放整数的存储空间,返回一个指向该存储空间的 ...

  10. DTO的问题

    首先使用写好的excle将表中的列进行复制,然后生成代码. 实现一个类继承FormCommonDTO.注意父类有的属性子类一定不能写,否则转换时会报错. 字段名字不一样,意义一样的,不能删除