javascript 跨域的几种方法

1.jsonp方法

转：https://blog.csdn.net/liusaint1992/article/details/50959571

主要实现功能：

1.参数拼装。

2.给每个回调函数唯一命名。

3.在回调成功或请求失败之后删除创建的javascript标签。需要兼容IE。IE下onerror事件不兼容。这里有对它的模拟实现。在IE下加载失败也能get到。

4.超时功能。超时取消回调。执行error。

5.error事件。可执行自己传入的error事件。

代码封装，调用，以及后台代码如下

/*author:ls <841766635@qq.com> 
* data:2016/03/20 
*/  
  
function JSONP(url,config){  
    var data = config.data || [];  
    var paraArr=[],paraString='';//get请求的参数。  
    var urlArr;  
    var callbackName;//每个回调函数一个名字。按时间戳。  
    var script,head;//要生成script标签。head标签。  
    var supportLoad;//是否支持 onload。是针对IE的兼容处理。  
    var onEvent;//onload或onreadystatechange事件。  
    var timeout = config.timeout || 0;//超时功能。  
  
    for(var i in data){  
        if(data.hasOwnProperty(i)){  
            paraArr.push(encodeURIComponent(i) + "=" +encodeURIComponent(data[i]));  
        }  
    }  
  
    urlArr = url.split("?");//链接中原有的参数。  
    if(urlArr.length>1){  
        paraArr.push(urlArr[1]);  
    }  
  
    callbackName = 'callback'+new Date().getTime();  
    paraArr.push('callback='+callbackName);  
    paraString = paraArr.join("&");  
    url = urlArr[0] + "?"+ paraString;  
  
    script = document.createElement("script");  
    script.loaded = false;//为了实现IE下的onerror做的处理。JSONP的回调函数总是在script的onload事件（IE为onreadystatechange）之前就被调用了。因此我们在正向回调执行之时，为script标签添加一个属性，然后待到onload发生时，再检测有没有这个属性就可以判定是否请求成功，没有成功当然就调用我们的error。  
  
    //将回调函数添加到全局。  
    window[callbackName] = function(arg){  
        var callback = config.callback;  
        callback(arg);  
        script.loaded = true;  
    }  
  
    head = document.getElementsByTagName("head")[0];  
    head.insertBefore(script, head.firstChild) //chrome下第二个参数不能为null  
    script.src = url;  
  
    supportLoad = "onload" in script;  
    onEvent = supportLoad ? "onload" : "onreadystatechange";  
  
    script[onEvent] = function(){  
  
        if(script.readyState && script.readyState !="loaded"){  
            return;  
        }  
        if(script.readyState == 'loaded' && script.loaded == false){  
            script.onerror();  
            return;  
        }  
        //删除节点。  
        (script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));    
        script = script[onEvent] = script.onerror = window[callbackName] = null;  
  
    }  
  
    script.onerror = function(){  
        if(window[callbackName] == null){  
            console.log("请求超时，请重试！");  
        }  
        config.error && config.error();//如果有专门的error方法的话，就调用。  
        (script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));    
        script = script[onEvent] = script.onerror = window[callbackName] = null;  
    }  
  
    if(timeout!= 0){  
        setTimeout(function() {  
            if(script && script.loaded == false){  
                window[callbackName] = null;//超时，且未加载结束，注销函数  
                script.onerror();                 
            }  
        }, timeout);  
    }  
  
}

<!-- jsonp.html-->
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>jsonp测试</title>  
    <script src="jsonp.js"></script>  
</head>  
<body>  
    <script>  
        function myerror(){  
            alert('there must be something wrong!');  
        }  
        function getData (data){  
            alert("服务器过来的数据是"+data);  
        }  
        var url = 'http://runningls.com/demos/2016/jsonp/jsonp.php';  
        //调用函数。  
        JSONP(url,{  
            data:{  
                id:1  
            },  
            callback:getData,  
            error:myerror,  
            timeout:10000  
        });  
    </script>  
</body>

<?php   
  
$callback = $_GET['callback'];  
$id = $_GET['id'];  
  
if($id == 1){  
    $res = 'this is 1';  
}  
  
if($id == 2){  
    $res = 'this is 2';  
}  
  
$res = $callback."('$res')";  
  
echo $res;  
  
?>

　　2.hash方法

//利用hash，场景是当前页面A 通过iframe 和frame嵌入跨域的页面B
//在A中伪代码如下：
var B = document。个体ElementsByTagName('iframe');
B.src = B.src + '#' + 'data';
//在B 中的伪代码如下
window.onhashchange = function(){
var data = window.location.hash;
}

　　3.postMessage

//窗口A（http:A.com)向跨域的窗口B（http://B.com)发送信息

window.postMessage('data','http://B.com');//B窗口
//在窗口B中监听；
window.addEventListener('message',function(event){
    console.log(event.origin); //http://A.com
    console.log(event.source);//Bwindow
    console.log(event.data); //data
},false);

　　4.webSocket方法

//websocket 【 参考质料】（http://www.ruanyifeng.com/blog/2017/05/websocket.html)
var ws = new WebSocket('wss://echo.websocket.org');
ws.onpen = function(evt){
    console.log.('Connection open ...');
    ws.send('hello websockets')
}
ws.onmessage = function(evt){
  console.log('Received message：'+evt.data)  
  ws.close()  
}
ws.onclose = function (evt){
  console.log('connection closed.')  
}

　　5.CORS方法

//CORS【 参考质料】（http://www.ruanyifeng.com/blog/2016/04/cors.html)

//url （必须），options（可选） 
fetch('/some/url',{
//配置属性才能跨域
 method:'get 
}).then(function(response){

}).catch(function(err){
 //出错了，等价于 then 的第二个参数 
})；

相关阅读:
第十二周作业
 第九周作业
 第八周作业
 第七周作业
 第六周作业
 参考博文地址
 第五周作业
 用例设计思路
 测试方法的四大金刚
 网络模型及访问过程
原文地址：https://www.cnblogs.com/qq364735538/p/8999679.html

javascript 跨域 的几种方法

javascript 跨域的几种方法