博客

jsonp

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

callback("hello world!")

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

客户端实现：

function jsonP({url, params}) {
    return new Promise((resolve, reject) => {
        window.callback = function(data) {
            resolve(data) // 将data传给promise的then
            document.body.removeChild(script)
        }
        const arrs = []
        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)

    })

}

服务端实现：

let express = require('express')

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

客户端调用：

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

缺点：

• 只能发送get请求，不支持post put delete
• 不安全，xss攻击，返回的内容可以对网站内容进行篡改