JavaScript实现jsonp&&CORS

Posted 2020-10-26 web-kongdp

(function (global) {
    var id = 0, container = document.head || document.getElementsByTagName(‘head‘)[0];

    function jsonp(options) {
        if (!options || !options.url) return;
        var scriptNode = document.createElement("script"),
            url = options.url,
            data = options.data || {},
            callback = options.callback,
            fnName = ‘jsonp‘ + id++;
        //添加回调函数
        data["callback"] = fnName;
        //拼接Url
        var params = [];
        for (var key in data) {
            params.push(encodeURIComponent(key) + ‘=‘ + encodeURIComponent(data[key]));
        }

        url = url.indexOf("?") > 0 ? (url + "&") : (url + "?");
        url += params.join("&");
        scriptNode.src = url;

        //传递的是一个匿名的回调函数，需要执行，暴露为一个全局方法
        global[fnName] = function (ret) {
            callback && callback(ret);
            // container.removeChild(scriptNode);
            delete global[fnName];
        };

        //出错处理
        scriptNode.onerror = function (ev) {
            callback && callback({error: "error"});
            container.removeChild(scriptNode);
            global[fnName] && delete global[fnName]
        };
        scriptNode.type = "text/javascript";
        container.appendChild(scriptNode)
    }

    global.jsonp = jsonp;

})(this);

 

//1.直接添加以下两行
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept")

//2.来自于stackoverflow的cors方法
function cors() {
    // Allow from any origin
    if (isset($_SERVER[‘HTTP_ORIGIN‘])) {
        // Decide if the origin in $_SERVER[‘HTTP_ORIGIN‘] is one
        // you want to allow, and if so:
        header("Access-Control-Allow-Origin: {$_SERVER[‘HTTP_ORIGIN‘]}");
        header(‘Access-Control-Allow-Credentials: true‘);
        header(‘Access-Control-Max-Age: 86400‘);    // cache for 1 day
    }
    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER[‘REQUEST_METHOD‘] == ‘OPTIONS‘) {
        if (isset($_SERVER[‘HTTP_ACCESS_CONTROL_REQUEST_METHOD‘]))
            header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
        if (isset($_SERVER[‘HTTP_ACCESS_CONTROL_REQUEST_HEADERS‘]))
            header("Access-Control-Allow-Headers: {$_SERVER[‘HTTP_ACCESS_CONTROL_REQUEST_HEADERS‘]}");
    }
}

 

　　JSONP，利用了src引用静态资源时不受跨域限制的机制，在客户端定义一个回掉函数做数据接收处理，把回掉函数名告知服务器，服务端需要按照JavaScript的语法把数据放到约定好的回调函数之中。

　　CORS，依附于Ajax，通过添加HTTP Header部分字段请求与获取有权限访问的资源。CORS对开发者透明，浏览器会自动根据请求的情况（简单和复杂）做出不同的处理。CORS需要服务器支持。

优缺点：

　　1. JSONP的主要优势是浏览器支持较好，IE10以下不支持CORS

　　2. JSONP只能用于获取资源（GET），CORS支持所有类型的HTTP请求。

　　3. JSONP错误处理机制并不完善，无法进行错误处理，CORS可以通过监听onerror监听错误，浏览器控制台会看到报错信息。

　　4. JSONP只会发一次请求；对于复杂请求，CORS会发两次请求。

　　5. JSONP存在callback参数注入和资源访问授权设置。

 

CORS参考：http://www.ruanyifeng.com/blog/2016/04/cors.html