求star

什么是JSONP#

TIP

JSONP是JSON的一种’使用模式’，利用JSONP实现跨域的原理是，通过script标签向服务器端发送一个get请求，服务端返回一个text/plain格式的文件，文件内容是对一个方法的调用，并回传数据

所以我们可以通过在客户端定义一个回调函数来接收数据。在回调函数中客户端就可以拿到服务端返回的数据

简单的实现:runner:#

客户端:#

function jsonP({ url, params }) {
    return new Promise((resolve, reject) => {
        window.callback = function (data) {
            resolve(data)
            document.body.removeChild(script)
        }
        const arrs = []
        // 将参数对象转成键值对(key-value)形式
        for (let key in params) {
            arrs.push(`${key}=${params[key]}`)
        }

        let script = document.createElement('script')
        script.src = `${url}?${arrs.join('&')}&cb=callback`
        document.body.appendChild(script)
    })
}

服务端(nodejs为例):#

let express = require('express')
let app = express()
app.listen(8089)
app.get('/sayHello',(req,res) => {
    let {wd,cb} = req.query
    res.end(`${cb}('hello world')`)
})

客户端调用:#

jsonP({
    url: 'http://localhost:8089/sayHello',
    params: {
        wd:'hello you'
    }
}).then((res) => {
    console.log(res)
})

JSONP实现跨域的缺点:bug:#