背景：

由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题，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他们没有被同源策略所限制，比如我们有可能使用一个网络上的图片，就可以请求得到

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.comhttps://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跨域原理解析相关推荐

jsonp 跨域原理详解
转载至:http://zha-zi.iteye.com/blog/1975116 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制 ...
jsonp跨域原理_【网站技术解读①】Javascript实现跨域请求
推荐一个读者做的不错的编程学习网站: 网站:潜安域名:http://www.qianani.com 另外将会不定期推送近期网站用到的一些技术,讲一些核心原理,今天为第一篇问题由来: 最近一直在优化 ...
jsonp跨域原理及使用
在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的. jsonp通过script标 ...
jsonp跨域原理_Rust 搭建可跨域访问服务器JsonP（一）
最近有一个项目极有可能需要一个可跨域的服务器做一个中转,思来想去决定用Rust来实现这个服务器,因为有如下优点. 1.编译体积小 2.跨平台 3.安全性较高 JsonP(JSON with Paddi ...
白话之jsonp跨域原理分析
一.针对跨域请求,我们首先要知道什么是同源策略. 同源策略即是指:域名,协议,端口相同,三者中有一者不一致,为了安全考虑我们所在的服务器是无法获得想要访问资源所在服务器的资源的. 如图: 比如我们在l ...
ajax的jsonp原理,jsonp 跨域原理和用法（上篇）
出于对网站安全性的要求,两个不同域名的网站之间是不能通过前端技术互相发送请求的.但有时我们又需要使用这样的机制.比如:网站需要制作一个天气预报插件,或者需要开发两个网站,一个供外部用户使用,一个供内部 ...
javascript实现jsonp跨域问题+原理
在工作中往往存在跨域的问题 ,跨域是什么概念就不在这里了,搜这类问题的肯定已经知道了.下面直接探讨jsonp跨域原理 jspon跨域原理: 1.动态创建一个script标签 var script = ...
JSONP跨域原理和jQuery.getJSON用法
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式).本文主要介绍JS ...
【漏洞利用】JSONP跨域请求漏洞挖掘、利用详解
参考文章轻松搞定JSONP跨域请求 jsonp跨域原理,使用以及同源策略跨域漏洞丨JSONP和CORS跨域资源共享 Tag: Ref: [[019.同源策略]] 本片文章仅供学习使用,切勿触犯法律 ...
JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). ...

jsonp跨域原理解析

背景：

突破同源策略限制：

JSONP跨域实现：

代码

总结：

jsonp跨域原理解析相关推荐

最新文章

热门文章