全面分析前端的网络请求方式

服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。 

app.all('*', function (req, res, next) {  
    res.header("Access-Control-Allow-Origin", "*");  
    res.header("Access-Control-Allow-Headers", "X-Requested-With");  
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");  
    next();  
});  

jsonp

script标签的src属性中的链接可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

jquery对jsonp的支持：   

$.ajax({  
         type : "get",  
         url : "http://xxxx"  
         dataType: "jsonp",  
         jsonp:"callback",   
         jsonpCallback: "doo",  
         success : function(data) {  
             console.log(data);  
         }  
     });  

fetch、axios等并没有直接提供对jsonp的支持，如果需要使用这种方式，我们可以尝试进行手动封装： 

(function (window,document) {  
    "use strict";  
    var jsonp = function (url,data,callback) {  
        // 1.将传入的data数据转化为url字符串形式  
        // {id:1,name:'jack'} => id=1&name=jack  
        var dataString = url.indexof('?') == -1? '?': '&';  
        for(var key in data){  
            dataString += key + '=' + data[key] + '&';  
        };  
        // 2 处理url中的回调函数  
        // cbFuncName回调函数的名字 ：my_json_cb_名字的前缀 + 随机数（把小数点去掉）  
        var cbFuncName = 'my_json_cb_' + Math.random().toString().replace('.','');  
        dataString += 'callback=' + cbFuncName;  
        // 3.创建一个script标签并插入到页面中  
        var scriptEle = document.createElement('script');  
        scriptEle.src = url + dataString;  
        // 4.挂载回调函数  
        window[cbFuncName] = function (data) {  
            callback(data);  
            // 处理完回调函数的数据之后，删除jsonp的script标签  
            document.body.removeChild(scriptEle);  
        }  
        document.body.appendChild(scriptEle);  
    }  
    window.$jsonpjsonp = jsonp;  
})(window,document)  

postMessage跨域

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!