JSONP的原理

49 阅读1分钟

segmentfault.com/a/119000004…

受同源策略的影响,ajax无法进行跨域请求;但是在web页面上调用js不受跨域的影响。因此,jsonp的是实现为,web客户端通过与调用脚本js的方式,来调用跨域服务器上动态生成的json数据,并将返回数据封装在回调函数中返回给客户端。简单例子如下:

<script>
const cb = (data) => {
   // get response data from server and running
}
</script>
<script src="http://jsonp.js?callback=cb"></script>
// 或

let script = document.createElement('script');
script.src = "http://jsonp.js?callback=cb";
body.append(script)
router.get('/', function (req, res, next) {
    (() => {
        const data = {
            x: 10
        };
        let params = req.query;
        if (params.callback) {
            let callback = params.callback;
            console.log(params.callback);
            res.send(`${callback}(${JSON.stringify(data.x)})`);
        } else {
            res.send('err');
        }
    })();
});