JSONP跨域实现

Posted 2021-09-29 地瓜哥

JSONP的介绍

JSONP：利用在页面中创建 <script> 节点的方法向不同域提交HTTP请求的方法。

JSONP跨域的基本原理：由于script 标签不受浏览器同源策略的影响，允许跨域引用资源。因此，通过动态创建 script 标签，然后利用 src 属性进行跨域。

JSONP的优点：不受同源策略的限制；兼容性好，在老的浏览器中可以运行；请求完毕后可以通过调用 callback 的方式回传结果。

JSONP的缺点：只支持 GET 这种HTTP请求；jsonp在调用失败的时候不会返回各种HTTP状态码；安全性：callback传入的参数是在后端进行了一次拼接，这即代表存在注入的可能，如果后端设计不当，是有可能出现安全风险的。

JSONP的封装

// jsonp的封装
function jsonp(params) {
    // 创建script标签并加入到head中
    var callbackName = params.jsonp;
    var head = document.getElementsByTagName(\'head\')[0];
    // 设置传递给后台的回调参数名
    params.data[\'callback\'] = callbackName;
    var data = formatParams(params.data);
    var script = document.createElement(\'script\');
    // 发送请求
    script.src = params.url + \'?\' + data;
    // 创建jsonp回调函数
    window[callbackName] = function (res) {
        head.removeChild(script);
        clearTimeout(script.timer);
        window[callbackName] = null;
        params.success && params.success(res);
    };
    head.appendChild(script);
    // 为了得知此次请求是否成功，设置超时处理
    if (params.time) {
        script.timer = setTimeout(function () {
            window[callbackName] = null;
            head.removeChild(script);
            params.error && params.error({
                message: \'超时\'
            });
        }, 500);
    }
}

// 格式化参数
function formatParams(data) {
    var arr = [];
    for (var name in data) {
        arr.push(encodeURIComponent(name) + \'=\' + encodeURIComponent(data[name]));
    };
    // 添加一个随机数，防止缓存
    arr.push(\'v=\' + random());
    return arr.join(\'&\');
}
        
// 获取随机数
function random() {
    return Math.floor(Math.random() * 10000 + 500);
}

JSONP的调用

jsonp({
    url: url,
    jsonp: \'jsonpCallback\',
    data: dataParams,
    success: function (res) {
        params.success && params.success();
    },
    error: function (error) {}
})

参考文章：

• 面试经典之Jsonp跨域原理
• jsonp 跨域原理分析