JSONP原理及实现

一、JSONP

JSONP全称 JSON with Padding，用于解决跨域问题的一种方案。
由于同源策略的限制，浏览器只允许XmlHttpRequest请求当前源（域名、协议、端口）的资源，而对请求script资源没有限制。JSONP通过请求script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，这种跨域的数据的方式被称为JSONP。

二、前端部分

请求方创建 script，src 指向响应方，同时传一个
查询参数?callbackName=yyy

button.addEventListener('click',(e) =>{
    // 创建一个动态标签
    let script = document.createElement('script');
    // src指向响应方，同时传一个查询参数
    script.src = 'www.pay.com?callback=money'
    // 添加到body里
    document.body.appendChild(script)
    // 加载成功后，删除标签
    script.onload = function(e){
      e.currentTarget.remove()
    }
    //失败后也删除
    script.onerror = function(e){
      e.currentTarget.remove()
    }
  })

三、后端部分

响应方根据查询参数callbackName，构造形如yyy('你要的数据')这样的响应。浏览器接收到响应，就会执行 yyy.call(undefined, '你要的数据')，那么请求方就知道了他要的数据。

if (path === '/pay'){
    let amount = fs.readFileSync('./db', 'utf8')
    fs.writeFileSync('./db', amount)
    let callback = query.callback
    response.setHeader('Content-Type', 'application/javascript')
    response.write(`
        ${callback}.call(undefined, 'success')
    `)
    response.end()
}