跨域的两种解决方式

解决方式：方案一——通过JSONP跨域
方案二——CORS（Cross-Origin Resource Sharing）
方案一——通过JSONP跨域
jsonp是JSON with padding的简写，看起来与json差不多，但是包含在函数调用中的json，利用动态script元素来使用（具有src属性的如img,iframe,srcipt都不受同源策略的影响）。该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

如果使用jquery，可以在type为get的时候dataType设为jsonp,就可以了。

var jsonpsrc = 'http://127.0.0.1/jsonpdata';
        $.ajax({
    
    
            method: 'get',
            url: jsonpsrc,
            data: {
    
    status: 200, count: 1},
            dataType: 'jsonp',
            jsonpCallBack: 'getdata',
            success: function (res) {
    
    
                console.log(res);
            },
            error: function (err) {
    
    
                console.log(err);
            },
            async: true
        });
    })

方案二——CORS（Cross-Origin Resource Sharing）

 function createCORSRequest(method,url){
    
    
        var xhr=new XMLHttpRequest();
        if("withCredentials" in xhr){
    
    
            xhr.open(method,url,true);
        }else if(typeof XDomainRequest != "undefined"){
    
    //IE10之前的版本使用XDmainRequest支持CORS
            xhr=new XDomainRequest();
            xhr.open(method,url);
        }else{
    
    
            xhr=null;
        }
        return xhr;
    }
    var request=createCORSRequest("get","待访问的地址");
    if(request){
    
    
        request.οnlοad=function(data){
    
    
            //do sth
        };
        request.send();
    }

适用场景：
承载的信息量大，get形式搞不定，需选用post传输。CORS支持所有类型的传输。

兼容性：
移动端全面支持（除opera mini）,PC上IE8+。

CORS思想：
使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。（请求和响应都不包含cookie）

当然如果设置成下面这样，所有的跨域都可以实现了，但这样毕竟太不安全。
"Access-Control-Allow-Origin:*";//允许任何域向我们的服务器发送请求

一般情况下，浏览器发送一个额外的Origin头部(由浏览器自动生成发送)

Origin:http://localhost:8080//本地网址
然后由服务器发送一个响应表头：Access-Control-Allow-Origin，如果服务器接收该请求，返回值（只能是通配符或单域名。）就和请求值一样。

Access-Control-Allow-Origin:http://localhost:8080
=>CORS方案的重点其实就在于服务器端的配置。

简单请求
3-1只使用 GET, HEAD 或者 POST 请求方法。
如果使用 POST 向服务器端传送数据，则数据类型(Content-Type)只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一种。

3-2不会使用自定义请求头（类似于 X-Modified 这种）。
HTTP头部信息不超出以下{Accept,Accept-Language,Content-Language,Last-Event-ID,content-type(只限于上面提到的3种类型)}

跨域的两种解决方式

猜你喜欢