跨域请求

小咪咪 2022-05-26 05:22 313阅读 0赞

跨域请求，协议,域名,端口有一个不一样都是跨域请求。  
产生跨域请求的原因：  
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。  
比如[http://www.1234.com][http_www.1234.com]和[https://www.1234.com][https_www.1234.com]，同样都是80端口，但是协议不一样。又或者是[http://m.1234.com][http_m.1234.com]和[http://www.1234.com][http_www.1234.com]。二级域名不一样两个都是不同的域。又或者是[http://www.1234.com:8080][http_www.1234.com_8080]和[http://www/1234.com:9090][http_www_1234.com_9090]端口不一样也就是两个不同的域。

1> document.domain + iframe (只有在主域相同的时候才能使用该方法)  
2> 动态创建script

这个没什么好说的，因为script标签不受同源策略的限制。  
3> CORS

CORS背后的思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

IE中对CORS的实现是xdr

var xdr = new XDomainRequest();
    xdr.onload = function(){ 
        console.log(xdr.responseText);
    }
    xdr.open('get', 'http://www.baidu.com');
    ......
    xdr.send(null);

其它浏览器中的实现就在xhr中

实现跨浏览器的CORS

4> JSONP

JSONP包含两部分：回调函数和数据。

回调函数是当响应到来时要放在当前页面被调用的函数。

数据就是传入回调函数中的json数据，也就是回调函数的参数了。

使用ajax的jsonp

$.ajax({  
                url:"http://5678.com//rest/orgbg/select",      
                type:"get",  
                cache:false,  
                dataType:"jsonp",  
                jsonp:"callback", //这里定义了callback的参数名称，以便服务获取callback的函数名即getMessage 
                jsonpCallback:"getMessage", //这里定义了jsonp的回调函数 
                success:function(data){   
                   // alert("success:"+data.data.orgBg); 
                    $("#bg_context").append(removeHtml(data.data.orgBg));
                },  
                error:function(){   
                    alert("发生异常");  
                }  
            });  
    
                function getMessage(jsonp){   
                    alert("message:"+jsonp);  
                }

[http_www.1234.com]: http://www.1234.com
[https_www.1234.com]: https://www.1234.com
[http_m.1234.com]: http://m.1234.com
[http_www.1234.com_8080]: http://www.1234.com:8080
[http_www_1234.com_9090]: http://www/1234.com:9090