美文网首页
JSONP 跨域原理

JSONP 跨域原理

作者: StoneHui | 来源:发表于2020-12-17 10:51 被阅读0次

同源策略 & 跨域

什么是 JSONP?

JSONPJSON with Padding)是资料格式JSON的一种“使用模式”,可以让网页从别的网域获取资料。 —— 维基百科

JSONP 核心原理

  • script 标签不受同源策略影响。
  • 动态插入到 DOM 中的 script 脚本可以立即得到执行。

实现步骤

  1. 客户端创建一个 JavaScript 函数,用来接收服务端返回的数据。
function onResponse(data) {
    // do something
}
  1. 客户端动态插入 script 标签执行请求。
var script = document.createElement('script')
script.src = 'protocal://domain:port/path?callback=onResponse'
document.head.appendChild(script)
document.head.removeChild(script)
  1. 服务端将数据和 js 回调函数名拼接为函数调用的字符串并返回给客户端。
app.get('/path', function(request, response) {
    var data = getData()
    var callback = request.query.callback
    var result = `${callback}(${JSON.stringify(data)});`
    response.send(result)
})
  1. 客户端接收到 script 标签响应并自动执行回调函数。

JSONP 的缺点

  • 只能使用 GET 请求。
  • 动态插入的 script 脚本可能被注入恶意代码。

相关文章

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

  • 做demo和学习过程当中遇到的一些问题,收集的博文

    轻松搞定JSONP跨域请求--->关键字: 跨域, 同源策略, JSONP原理 git拉取远程分支到本地 git ...

  • 跨域

    跨域 什么是跨域: 解决跨域 通过jsonp原理:在页面引入跨域js和css时,没有存在跨域问题.因此可以动态创建...

  • JSONP技术原理及实现

    转自《跨域jsonp的原理》 首先确定为什么要用jsonp,因为要跨域请求数据,那为什么会发生跨域呢,因为浏览器的...

  • js跨域问题

    来源 javascript中实现跨域的方式总结 第一种方式:jsonp请求;jsonp的原理是利用 标签的跨域特性...

  • 跨域上传图片并预览

    跨域上传文件 之前解决跨域问题都是使用的JQuery的JSONP类型的Ajax请求,JSONP原理是让服务器把数据...

  • 遇到的面试题

    null instanceOf Object false jsonp跨域原理,优缺点,安全性因素 jsonp的实现...

  • 试题2

    如何解决跨域问题? jsonp(jsonp 的原理是动态插入 script 标签) document.domain...

  • 跨域

    JSONP jsonp是一种跨域通信的手段,它的原理其实很简单: 首先是利用script标签的src属性来实现跨域...

  • jsonp

    jsonp的跨域原理解析 背景: 由于浏览器同源策略的限制,非同源下的请求,都会产生跨域问题,jsonp就是为了解...

网友评论

      本文标题:JSONP 跨域原理

      本文链接:https://www.haomeiwen.com/subject/fhsogktx.html