Jsonp原理和实例

原创

伯爵

修改于 2019-10-23 16:56:15

9392

修改于 2019-10-23 16:56:15

文章被收录于专栏：前端小菜鸟前端小菜鸟

在浏览器的web端，img，script，style等标签是少数几个不受同源策略的影响。

Jsonp(Json with padding)是一种简单的处理跨域的解决方案，原理就是利用script可以直接请求第三方进行跨域请求的特点，动态的创建<script>元素，script元素的src属性设置跨域请求资源url。

形式上jsonp是包涵在函数回调中的json，如：

function callback(response) {
    var info = response && response.info;
    console.log("根据名称查询到的信息是：" + info)
}

callback({name:'jsonp'})

我们可以看到jsonp包涵了回调函数和数据，回调函数是请求完毕并响应到页面立即调用的函数，参数就是我们传入callback回调函数的参数，这里是 {name:'jsonp'}。

jsop的特点就是使用简单，但是jsonp的弊端就是绕过了浏览器的同源策略，必须确保第三方资源能够安全准确的运行我们的回调函数，第一个问题是第三方资源的不安全会导致我们的程序出现安全漏洞，二是jsonp的失败状态不容易检测。

我们看一段简单的实例了解实际的jsonp如何使用：

在localhost域的index.html页面，请求其他域otherUrl的资源index.js

function jsonp(res) {
    let script = document.createElement('script');
    let url = res.url + '?callback=' + res.callback.name;
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script); 
}

function callbackFun(res) {
    console.log('msg', res && res['msg']);
} 
jsonp({
    url: 'otherUrl',
    data: { msg: 'val'},
    callback: callbackFun
});

在其他域otherUrl的app.js文件中，我们定义了服务器的内容：

const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
    if(ctx.method === 'GET' && ctx.url.indexOf('?callback') === 1) {
        let callbackFun = ctx.query.callback || 'callback';
        let body = {
            msg: 'jsonp请求成功！'
        }
        ctx.type = 'text/javascript';
        ctx.body = `;${callbackFun}(${JSON.stringify(body)})`;
    } else {
        ctx.body = '测试!!!';
    }
});

app.on('error', err => {
    log.error('server error', err)
});

app.listen(3000, ()=> {
    console.info("node server start...")
});

当资源请求完毕，立即执行页面定义的回调函数callback，打印jsonp。

jsonp是动态的去创建script元素，所以jsonp仅仅支持get请求。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

json