跨域解决方案Jsonp原理解析
这篇文章主要介绍了跨域解决方案Jsonp原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
1.什么是Jsonp?
Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
为什么我们从不同的域(网站)访问数据需要一个特殊的技术( JSONP )呢?这是因为同源策略。
同源策略,它是由 Netscape 提出的一个著名的安全策略,现在所有支持 JavaScript 的浏览器都会使用这个策略。
2.使用Jsonp优缺点
优点:
1.可以跨域请求数据,摆脱同源策略的限制。
2.对浏览器比较友好,尤其低版本浏览器。
缺点:
1.只支持GET请求。
2.无法对请求错误进行获取和处理。
3.安全性较差。无法防止页面的注入漏洞。
3.Jsonp具体实现
前端
$.ajax({ url: 请求的url, type: "get", dataType: "jsonp", jsonp: "callBack", success: function(data) { //返回结果处理程序 } });
后端
@RequestMapping(value = "getAllData",method = RequestMethod.GET) @ResponseBody public String getAllData(@RequestParam("callBack") String callBack){ return callBack+"("+JSON.toJSONString(this.infoService.getAllData())+")"; }
相关推荐
-
原生js的ajax和解决跨域的jsonp(实例讲解)
最近慢慢感觉,学再多框架,库,都不如老老实实先把基础弄扎实了. 不说废话,先上一个用ajax请求下本地的一个.txt文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload =function(){ var oBtn = d
-
使用jsonp完美解决跨域问题
调用web接口,get请求,发现提示:No 'Access-Control-Allow-Origin' header is present on the requested resource. 这个和安全机制有关,默认不允许跨域调用 处理手段:使用jsonp格式, ajax请求参数dataType:'JSONP'. 复制代码 代码如下: $.ajax({ url: "http://.......", type: 'GET', dataTy
-
利用jsonp解决js读取本地json跨域的问题
前言 本文主要给大家介绍了关于使用jsonp解决js读取本地json跨域的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 一 .问题描述 通过ajax方式读取本地json文件,谷歌浏览器会提示跨域错误,导致获取不到json数据. 跨域报错.png ajax获取json数据代码: $.ajax({ url: "file/employeejson.json",//json文件位置 type: "GET",//请求方式为get dataType:
-
基于vue-resource jsonp跨域问题的解决方法
最近在学习vue.js 碰到个ajax跨域请求的问题,之前知道可以用jsonp解决,但是一直没实践过,这次用发现里面好多问题,所以现在记录下来,希望可以给刚接触使用jsonp的同学一点帮助! 关于什么是jsonp,以及为什么要用jsonp我就不多说了,不明白的同学自行百度一下. 我们先来说一下jQuery里面的jsonp请求,这搞懂了 vue-resource 里面的jsonp就容易明白了. 这里我以json数据为例,首先我们通过 $.get可以直接得到一个我们想要的对象,但是用 jsonp 就
-
跨域请求的完美解决方法(JSONP, CORS)
一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题.解决方法有JSONP,Flash等等. JSONP 我们发现,Web页面上调用js文件时不受是否跨域的影响,凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>.<img>.<iframe>.那就是说如果要跨域访问数据,就服务端只能把数据放在js格式的文件里.恰巧我们知道JSON可以简洁的描述复杂数据,而且JSON还被js原生支持,所以在客户端几乎可以随心所欲的处
-
springboot+jsonp解决前端跨域问题小结
现在咱们一起来讨论浏览器跨域请求数据的相关问题.说这样可能不是很标准,因为拒绝跨域请求数据并不是浏览器所独有的,之所以会出现跨域请求不了数据,是因为浏览器基本都实现了一个叫"同源策略"的安全规范.该规范具体是什么呢?我们在MDN上找到了一份资料,地址如下: 浏览器同源策略讲解 总的来说,当A网址和B网址在 协议 . 端口 . 域名 方面存在不同时,浏览器就会启动同源策略,拒绝A.B服务器之间进行数据请求. 说了同源策略,纸上得来终觉浅,绝知此事要躬行,到底同源策略是怎么体现的呢?下面我
-
轻松搞定jQuery+JSONP跨域请求的解决方案
JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSONP 抓到的资料
-
用jQuery与JSONP轻松解决跨域访问的问题
时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成"跨域访问"的工作,然后在浏览器端用AJAX获取本机服务器端"跨域访问"对应的url.来间接完成跨域访问也是可以的
-
跨域解决之JSONP和CORS的详细介绍
JSONP跨域和CORS跨域 什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名.协议.端口均相同. 浏览器执行JavaScript脚本时,会检查这个脚本属于那个页面,如果不是同源页面,就不会被执行. JSONP跨域 只支持GET请求,不支持POST等其它请求,也不支持复杂请求,只支持简单请求. CORS跨域 支持所有的请求,包含GET.POST.OPTOIN.PUT.DELETE等.既支持复杂请求,也支持简单请求
-
快速解决跨域请求问题:jsonp和CORS
网上各种跨域教程,各种实践,各种问答,除了简单的 jsonp 以外,很多说 CORS 的都是行不通的,老是缺那么一两个关键的配置.本文只想解决问题,所有的代码经过亲自实践. 本文解决跨域中的 get.post.data.cookie 等这些问题. 本文只会说 get 请求和 post 请求,读者请把 post 请求理解成除 get 请求外的所有其他请求方式. JSONP JSONP是利用浏览器对script的资源引用没有同源限制,通过动态插入一个script标签,当资源加载到页面后会立即执行的原
随机推荐
- 漂亮的表格
- asp dictionary对象的用法
- 数据库正规化和设计技巧
- 经典Javascript正则表达式[优质排版]
- Docker高级教程之智能添加与修改防火墙规则
- aspx中页面按钮写返回上一页代码
- 漂亮的widgets,支持换肤和后期开发新皮肤
- ajax无刷新评论功能
- php将字符串全部转换成大写或者小写的方法
- Python中创建字典的几种方法总结(推荐)
- C# httpwebrequest访问HTTPS错误处理方法
- C++归并排序算法实例
- snprintf函数的用法解析
- MySQL创建和删除表操作命令实例讲解
- 详解Docker cpu限制分析
- Android ToggleButton 详解及实例代码
- android图像绘制(六)获取本地图片或拍照图片等图片资源
- Nginx中的root&alias文件路径及索引目录配置详解
- c++中虚函数的实现详解
- 详解jQuery移动页面开发中的ui-grid网格布局使用