-
2020-10-27 16:59:29更多相关内容
-
jsonp跨域原理
2022-03-31 14:35:13基本原理: 浏览器端:动态生成一个script标签来请求后台接口,标签的src属性就是接口的url。定义一个接收响应数据的... 1、jsonp只能解决GET类型的ajax请求跨域问题。 2、jsonp请求不是ajax请求,而是一般的get..-
基本原理:
浏览器端:动态生成一个script标签来请求后台接口,标签的src属性就是接口的url。定义一个接收响应数据的函数,并将函数名作为请求参数提交给后台。
服务器端:接收到请求处理产生结果数据,返回一段JS代码,JS代码中会对定义好的函数执行调用,并将结果数据作为实参传给函数。
浏览器端:收到响应后自动执行JS代码,调用定义好的函数,得到结果数据。
-
注意:
1、jsonp只能解决GET类型的ajax请求跨域问题。
2、jsonp请求不是ajax请求,而是一般的get请求。
-
-
jsonp跨域原理解析
2022-02-18 11:06:09由于浏览器同源策略的限制,非同源下的请求,都会产生跨域问题,jsonp即是为了解决这个问题出现的一种简便解决方案。 同源策略即:同一协议,同一域名,同一端口号。当其中一个不满足时,我们的请求即会发生跨域...背景:
由于浏览器同源策略的限制,非同源下的请求,都会产生跨域问题,jsonp即是为了解决这个问题出现的一种简便解决方案。同源策略即:同一协议,同一域名,同一端口号。当其中一个不满足时,我们的请求即会发生跨域问题。
举个简单的例子:
- http://www.abc.com:3000到https://www.abc.com:3000的请求会出现跨域(域名、端口相同但协议不同)
- http://www.abc.com:3000到http://www.abc.com:3001的请求会出现跨域(域名、协议相同但端口不同)
- http://www.abc.com:3000到http://www.def.com:3000的请求会出现跨域(域名不同)
突破同源策略限制:
现在知道了同源策略,那我们就来看下jsonp是如何突破同源策略的限制实现跨域的首先,不知道大家有没有注意,不管是我们的script标签的src还是img标签的src,或者说link标签的href他们没有被同源策略所限制,比如我们有可能使用一个网络上的图片,就可以请求得到
<img src="https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=6d0bf83bda00baa1a52c41bb7711b9b1/0b55b319ebc4b745b19f82c1c4fc1e178b8215d9.jpg">
src或href链接的静态资源,本质上来说也是一个get请求,拿csdn上的静态资源举例:可以看到,确实是个get请求无疑。同理img标签的src和link标签的href也会发送一个get请求去请求静态资源。那么我们通过这点,是不是发现了点什么,这些标签的src和link属性,并没有受同源策略的限制。说到这里jsonp的实现原理就浮出水面了。
jsonp就是使用同源策略这一“漏洞”,实现的跨域请求(这也是jsonp跨域只能用get请求的原因所在)。想象一下,既然是个get请求,那么服务端一定可以接收到,并做出反馈。ok,知道这两点之后,我们开始具体使用jsonp进行跨域请求。
JSONP跨域实现:
根据上边所说的,我们要用过利用srcipt标签的src属性来实现,那么我们如何做呢,我们来看一段简单的代码,为了方便,我这里使用jQuery:$('#btn').click(function(){
var frame = document.createElement('script');
frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';
$('body').append(frame);
});
可以看到,让我们点击按钮的时候,创建了一个script标签(即会发送一个get请求到src指向的地址,注意:这里必须使用scipt标签,否则返回的数据不会被当作js执行),src地址是"localhost:3000/article-list",这个src地址,就是我们请求的服务端接口。
注意,这里我们有是那个参数,name,age和callback,name和age不说了,这跟我们平时普通的get请求参数无异。
主要说下callback这个参数,callback参数就是核心所在。为什么要定义callback呢?首先我们知道,这个get请求已经被发出去了,那么我们如何接口请求回来的数据呢,callback=func则可以帮我们做这件事。我们继续看下边的代码
<button id="btn">点击</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#btn').click(function(){
var frame = document.createElement('script');
frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';
$('body').append(frame);
});
function func(res){
alert(res.message+res.name+'你已经'+res.age+'岁了');
}
</script>
这里可以看到,我们声明了一个func函数,但没有执行,你可以想一下,如果服务端接口到get请求,返回的是func({message:'hello'}),这样的话在服务端不就可以把数据通过函数执行传参的方式实现数据传递了吗。服务端代码实现:
接下来,我们看服务端应该如何实现:router.get('/article-list', (req, res) => {
console.log(req.query, '123');
let data = {
message: 'success!',
name: req.query.name,
age: req.query.age
}
data = JSON.stringify(data)
res.end('func(' + data + ')');
});
ok,接下来当我们点击提交的时候,就获取到了服务端反回的数据。如下:这样下来,就完成了实现jsonp的跨域。
代码
shelleyhlx/node-server-example - Gitee.com
https://gitee.com/shelleyhlx/node-server-example/tree/masterwebstorm运行,首先运行server:
D:\node-server-example\example\express> node .\01\server.js
,在webstorm的浏览器运行a.html。
总结:
需要注意的是,callback参数定义的方法是需要前后端定义好的,具体什么名字,商讨好就可以了。其实jsonp的整个过程就类似于前端声明好一个函数,后端返回执行函数。执行函数参数中携带所需的数据,整个过程实际非常简单易懂,如有疑问大家可以在下方留言,我会及时回复。
————————————————
版权声明:本文为CSDN博主「机智的赵先生」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/badmoonc/article/details/82289252 -
JSONP 跨域原理
2020-12-17 11:06:52同源策略: 为保护用户信息安全,防止恶意网站窃取用户数据,浏览器限制本域中的脚本只能访问本域中...JSONP 核心原理 script 标签不受同源策略影响。 动态插入到 DOM 中的 script 脚本可以立即得到执行。 实现步骤 .什么是 JSONP?
JSONP(JSON with Padding)是资料格式JSON的一种“使用模式”,可以让网页从别的网域获取资料。 —— 维基百科
JSONP 核心原理
script
标签不受同源策略影响。- 动态插入到
DOM
中的script
脚本可以立即得到执行。
实现步骤
- 客户端创建一个
JavaScript
函数,用来接收服务端返回的数据。
function onResponse(data) { // do something }
- 客户端动态插入
script
标签执行请求。
var script = document.createElement('script') script.src = 'protocal://domain:port/path?callback=onResponse' document.head.appendChild(script) document.head.removeChild(script)
- 服务端将数据和 js 回调函数名拼接为函数调用的字符串并返回给客户端。
app.get('/path', function(request, response) { var data = getData() var callback = request.query.callback var result = `${callback}(${JSON.stringify(data)});` response.send(result) })
- 客户端接收到
script
标签响应并自动执行回调函数。
JSONP 的缺点
- 只能使用
GET
请求。 - 动态插入的
script
脚本可能被注入恶意代码。
-
JSONP跨域的原理解析及其实现介绍
2020-10-26 03:18:52JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理 -
Jsonp 跨域的原理以及Jquery的解决方案
2020-10-28 12:34:17JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。 -
jsonp跨域的原理
2020-05-21 16:26:11jsonp是一种常用的跨域手段,和反向代理,服务端做跨域处理相比,jsonp更显得方便轻巧,因而被大量用来处理跨域的请求,那么,这种请求方式到底是用了什么黑魔法,来解决令我们头疼的跨域问题。 2. 原理 jsonp... -
jsonp 跨域原理详解
2019-04-19 15:27:53JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理。 利用在页面中创建节点的方法向不同域提交HTTP请求的方法称为JSONP,这项技术可以解决跨域提交Ajax... -
深入剖析jsonp跨域原理
2019-01-09 14:58:27在项目中遇到一个jsonp跨域的问题,于是仔细的研究了一番jsonp跨域的原理。搞明白了一些以前不是很懂的地方,比如: 1)jsonp跨域只能是get请求,而不能是post请求; 2)jsonp跨域的原理到底是什么; 3)除了... -
简单讲解JSONP的跨域原理
2020-11-04 17:22:27同源策略:协议、域名、端口三者相同,则是同源。同源策略是浏览器的一种保护机制,是为了保护本地数据不被JavaScript...1.JSONP跨域原理 1.在VScode中创建一个html文件 client.htnl:(模拟客户端) <!DOCTYPE htm. -
浅析 JSONP 跨域原理
2021-03-03 15:11:39JSONP 的出现是因为浏览器的同源策略,同源是指所请求的域名、协议、端口号和当前请求相同,同源策略限制了原生XMLHttpRequest() 对象无法获取到 JSON 数据,但是标签是可以跨域的。JSONP 的原理是通过标签向服务器... -
jQuery jsonp跨域原理
2018-03-07 15:59:35实际上单jQuery还是实现不了跨域加载数据的,由于XMLHttpRequest的安全设置,是不允许直接跨域的。... jQuery jsonp跨域原理实际就是使用script标签加载配置对象中的跨域url,再使用script标签加载之前,会在客... -
JSONP跨域原理
2019-12-17 21:06:35JSONP跨域原理: 利用了src不受同源策略的影响 ,可以访问其他页面的数据。 源生JS实现JSONP的步骤: 客户端 定义获取数据后调用的回调函数 动态生成对服务端JS进行引用的代码 设置url为提供jsonp服务的url地址... -
JSONP跨域请求原理及优缺点
2018-04-13 11:26:09一、JSONP与JSON的区别: JSONP 是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback 或者开始就定义一个回调方法,参数给服务端,然后服务端返回数据时会将这个callback 参数作为函数名来包裹... -
jsonp跨域原理详解
2017-01-05 18:33:32JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理。 利用在页面中创建节点的方法向不同域提交HTTP请求的方法称为JSONP,这项技术可以解决跨域... -
Jsonp跨域原理及实现
2018-12-21 11:30:20一般遇到跨域问题都是直接后台cors着手或者nginx实现,很少用过jsonp,不过有人使用总有它存在的价值,了解一下吧== 一、什么是JSONP 1.1 同源策略 如果两个页面拥有相同的协议,端口(如果指定),和主机,... -
jsonp跨域原理(简单粗暴)
2017-09-29 08:11:59利用 script 标签没有跨域限制,当需要调用第三方数据的时候,src属性指向第三方地址带有参数,并提供一个回调函数来接受数据,来传递给服务端,第三方产生响应(服务端返回数据)时将该回调函数作为函数名来包裹... -
JSONP跨域的实现原理
2021-05-21 16:49:30由于浏览器同源策略的限制,非同源下的请求,都会产生跨域问题,jsonp即是为了解决这个问题...jsonp就是使用同源策略这一“漏洞”,实现的跨域请求(这也是jsonp跨域只能用get请求的原因所在) <script> wind