JavaScript跨域

JSONP

jsonp其实是由两部分组成的：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的json参数。利用的是script标签中src可以引用不同域上js文件的思想，进行跨域。

jsonp的优点：它不像XHR对象实现ajax请求那样受到同源政策的限制，它的兼容性更好，XHR在进行ajax请求时，为了兼容IE，还需创建ActiveX对象。并且在请求完毕之后可以通过回调函数的方式将结果回传
jsonp的缺点：它只支持get请求而不支持post等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行javascript调用问题
实验代码：




    
    
    news
    



    
        第11日前瞻：中国冲击4金 博尔特再战
        男双力争会师决赛 
        女排将死磕巴西！

服务器代码：

app.get('/getNews', function (req, res) {

    var news = [
        "1.三国",
        "2.水浒",
        "3.红楼",
        "4.西游",
        "5.聊斋",
        "6.山海",
        "7.道德",
        "8.三字"
    ]
    var data = [];
    for (var i = 0; i < 3; i++) {
        var index = parseInt(Math.random() * news.length);
        data.push(news[index]);
        news.splice(index, 1);
    }

    var cb = req.query.callback;
    if (cb) {
        res.send(cb + '(' + JSON.stringify(data) + ')');
    } else {
        res.send(data);
    }

})

CORS

cors简单与复杂请求解析

CORS与JSONP对比：
CORS无疑更为先进，方便和可靠。
1.jsonp只能实现get请求，而CORS支持所有类型的HTTP请求
2.使用CORS，开发者可以使用普通的XHR发起请求和获得数据，比起jsonp有更好的错误处理
3.jsonp主要被老的浏览器支持，而绝大多数现代浏览器都已经支持CORS

CORS可以分成两种：

1、简单请求
2、复杂请求

一个简单的请求大致如下：
HTTP方法是下列之一

HEAD

GET
POST

HTTP头包含

Accept

Accept-Language
Content-Language
Last-Event-ID
Content-Type，但仅能是下列之一
application/x-www-form-urlencoded
multipart/form-data
text/plain

任何一个不满足上述要求的请求，即被认为是复杂请求。一个复杂请求不仅有包含通信内容的请求，同时也包含预请求（preflight request）。

简单请求的发送从代码上来看和普通的XHR没太大区别，但是HTTP头当中要求总是包含一个域（Origin）的信息。该域包含协议名、地址以及一个可选的端口。不过这一项实际上由浏览器代为发送，并不是开发者代码可以触及到的。

简单请求的部分响应头及解释如下：

Access-Control-Allow-Origin（必含）- 不可省略，否则请求按失败处理。该项控制数据的可见范围，如果希望数据对任何人都可见，可以填写”*”。

Access-Control-Allow-Credentials（可选） – 该项标志着请求当中是否包含cookies信息，只有一个可选值：true（必为小写）。如果不包含cookies，请略去该项，而不是填写false。这一项与XmlHttpRequest2对象当中的withCredentials属性应保持一致，即withCredentials为true时该项也为true；withCredentials为false时，省略该项不写。反之则导致请求失败。
Access-Control-Expose-Headers（可选） – 该项确定XmlHttpRequest2对象当中getResponseHeader()方法所能获得的额外信息。
通常情况下，getResponseHeader()方法只能获得如下的信息：
Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
当你需要访问额外的信息时，就需要在这一项当中填写并以逗号进行分隔

如果仅仅是简单请求，那么即便不用CORS也没有什么大不了，但CORS的复杂请求就令CORS显得更加有用了。简单来说，任何不满足上述简单请求要求的请求，都属于复杂请求。比如说你需要发送PUT、DELETE等HTTP动作，或者发送Content-Type: application/json的内容。

复杂请求表面上看起来和简单请求使用上差不多，但实际上浏览器发送了不止一个请求。其中最先发送的是一种”预请求”，此时作为服务端，也需要返回”预回应”作为响应。预请求实际上是对服务端的一种权限请求，只有当预请求成功返回，实际请求才开始执行。

预请求以OPTIONS形式发送，当中同样包含域，并且还包含了两项CORS特有的内容：

Access-Control-Request-Method – 该项内容是实际请求的种类，可以是GET、POST之类的简单请求，也可以是PUT、DELETE等等。
Access-Control-Request-Headers – 该项是一个以逗号分隔的列表，当中是复杂请求所使用的头部。

显而易见，这个预请求实际上就是在为之后的实际请求发送一个权限请求，在预回应返回的内容当中，服务端应当对这两项进行回复，以让浏览器确定请求是否能够成功完成。

复杂请求的部分响应头及解释如下：

Access-Control-Allow-Origin（必含） – 和简单请求一样的，必须包含一个域。

Access-Control-Allow-Methods（必含） – 这是对预请求当中Access-Control-Request-Method的回复，这一回复将是一个以逗号分隔的列表。尽管客户端或许只请求某一方法，但服务端仍然可以返回所有允许的方法，以便客户端将其缓存。
Access-Control-Allow-Headers（当预请求中包含Access-Control-Request-Headers时必须包含） – 这是对预请求当中Access-Control-Request-Headers的回复，和上面一样是以逗号分隔的列表，可以返回所有支持的头部。这里在实际使用中有遇到，所有支持的头部一时可能不能完全写出来，而又不想在这一层做过多的判断，没关系，事实上通过request的header可以直接取到Access-Control-Request-Headers，直接把对应的value设置到Access-Control-Allow-Headers即可。
Access-Control-Allow-Credentials（可选） – 和简单请求当中作用相同。
Access-Control-Max-Age（可选） – 以秒为单位的缓存时间。预请求的的发送并非免费午餐，允许时应当尽可能缓存。

一旦预回应如期而至，所请求的权限也都已满足，则实际请求开始发送。




    
    
    news
    



    
        第11日前瞻：中国冲击4金 博尔特再战
        男双力争会师决赛 
        女排将死磕巴西！

//服务器
app.get('/getNews', function (req, res) {

    var news = [
        "1.三国",
        "2.水浒",
        "3.红楼",
        "4.西游",
        "5.聊斋",
        "6.山海",
        "7.道德",
        "8.三字"
    ]
    var data = [];
    for (var i = 0; i < 3; i++) {
        var index = parseInt(Math.random() * news.length);
        data.push(news[index]);
        news.splice(index, 1);
    }
    //res.header("Access-Control-Allow-Origin", "http://c.jrg.com:8080"); 
    res.header("Access-Control-Allow-Origin", "*");
    res.send(data);

})

降域

页面1：





    跨域测试

页面2：

postMessage