JSONP跨域原理

由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题，jsonp是为了解决这个问题出现的一种解决方案。
同源策略：同一协议、同一域名、同一端口，只要其中一个不满足，即产生跨域

原理

例如百度查询的链接 https://www.baidu.com/sugrec?prod=pc&wd=q&cb=show

可以看到传有两个参数prod、wd和一个回调函数cb，cb=jQuery110204034153322245224_1574771090967的作用将服务端通过传参的方式将数据传递回来，即

function show(data) {
    console.log(data)
}

window.onload = function () {
    let url = `https://www.baidu.com/sugrec?prod=pc&wd=q&cb=show`
    let script = document.createElement('script')
    script.src = url
    document.head.appendChild(script)
}

结果：

callback参数定义的方法需要前后端定义好，jsonp的整个过程就相当于前端申明好一个函数，后端返回执行函数，执行函数参数中携带所需的数据

JSONP的缺点

• 只能发送get请求，因为script只能发送get请求
• 需要后台配合，此种情况需要前后台配合，将返回结果返回callback(result)的形式