Jsonp原理
Jsonp(JSON with Padding)
JSONP:一种非官方跨域数据交互协议
众所周知，由于浏览器的同源策略，要从不同的域（网站）访问数据会产生跨域问题，img的src(获取图片)，link的herf（获取css），script的scr(获取JavaScript)，这三个不属于同源策略，都可以跨域获取数据，因此，jsonp应运而生！
JSONP实现跨域的原理简单的说，就是动态创建script标签，然后利用script的src 不受同源策略约束来跨域获取数据。
直接上代码，前端：
<body>
<button id="normal">原生jsonp</button>
<script>
function show(x) {
console.log('下面是jsonp返回的数据')
console.log(x)
}
var btn = document.getElementById('normal')
btn.onclick = function () {
var parent = document.body
var cb = document.createElement('script');
cb.src = "http://localhost:3000?callback=show"
parent.appendChild(cb)
parent.removeChild(parent.lastElementChild)
}
</script>
</body>前端（jquery版）：
<body>
<button id="ajax">ajax jsonp</button>
<script>
$("#ajax").click(function () {
$.ajax({
url: "http://localhost:3000",
dataType: 'jsonp',
success: function (result) {
console.log('下面是jsonp返回的数据')
console.log(result)
}
});
});
</script>
</body>后端（node）：
var express = require('express')
var url = require('url')
var app = express()
app.use('/', function (req, res) {
var urlParse = url.parse(req.url, true)
var cb = urlParse.query.callback
res.end(cb + "('I am jsonp data')")
})
app.listen('3000', function () {
console.log('running......')
})本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/03/10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
