跨域

定义

跨域是指从一个域名的网页去请求另一个域名的资源。比如从http://www.baidu.com/ 页面去请求 http://www.google.com 的资源。跨域的严格一点的定义是：只要 协议，域名，端口有任何一个的不同，就被当作是跨域。

目前学到的四种跨域的解决方式

JSONP

jsonp是一种跨域通信的手段，它的原理其实很简单：
1.首先是利用script标签的src属性来实现跨域。
2.通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。
3.由于使用script标签的src属性，因此只支持get方法。
前端代码：

    
    
    


    

        

        
        show news
    

    

后端代码：

var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')


http.createServer(function(req,res){
    var pathObj = url.parse(req.url,true)

    switch(pathObj.pathname){
        case '/getNews':
            var news = [
            "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
            "正直播柴飚/洪炜出战 男双力争会师决赛",
            "女排将死磕巴西！郎平安排男陪练模仿对方核心"
            ]
            res.setHeader('content-Type','text/json;charset=utf-8')
            if(pathObj.query.callback){
                res.end(pathObj.query.callback + '('+ JSON.stringify(news) +')')
            }else{
                res.end(JSON.stringify(news))
            }

            break;

            default:
                fs.readFile(path.join(__dirname,pathObj.pathname),function(e,data){
                    if(e){
                        res.writeHead(404,'not found')
                        res.end('
404 Not Found
')
                    }else{
                        res.end(data)
                    }
                })
    }
}).listen(8080)

• 优点
  1.兼容性很好，在古老的浏览器也能很好的运行
  2.不需要 XMLHttpRequest 或 ActiveX 的支持；并且在请求完毕后可以通过调用 callback 的方式回传结果。
  3.不受同源策略的限制
• 缺点
  1.只支持 GET 请求而不支持 POST 等其它类型的 HTTP 请求。
  2.只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
  3.容易遭受XSS攻击，因为我们拿到的是对方接口的数据作为js执行，如果得到的是一个很危险js，获取了用户信息和cookies，这时执行了js就会出现安全问题。

CORS

CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 ajax 只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

CORS 分为简单请求和非简单请求，本文在这里实现简单请求。（非简单请求请参考）
前端代码：

    
    


    

        

        
        show news
    

    

后端代码：

var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')


http.createServer(function(req,res){
    var pathObj = url.parse(req.url,true)

    switch(pathObj.pathname){
        case '/getNews':
            var news = [
            "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
            "正直播柴飚/洪炜出战 男双力争会师决赛",
            "女排将死磕巴西！郎平安排男陪练模仿对方核心"
            ]
            res.setHeader('Access-Control-Allow-Origin','http://b.ji.com:8080')
            res.end(JSON.stringify(news))

            break;

            default:
                fs.readFile(path.join(__dirname,pathObj.pathname),function(e,data){
                    if(e){
                        res.writeHead(404,'not found')
                        res.end('
404 Not Found
')
                    }else{
                        res.end(data)
                    }
                })
    }
}).listen(8080)

Access-Control-Allow-Origin字段是必须的，它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

降域

当这两个域名都属于同一个基础域名，而且所用的协议，端口都一致的时候，可以使用降域来实现跨域；当以上所述成立的时候，可以通过将domain改成一样的来实现。

a.html代码：

    
    
    


    

        
使用降域实现跨域
        

            
        

        
    

    

b.html代码:

启动本地服务器，打开a.ji.com:8080/a.html ，window.frames[0].document.body可以取到body中的元素，
在非同源情况下，因为同源策略的限制，无法取到相应元素，会报错。

postMessage

HTML5引入了一个全新的API：跨文档通信 API（Cross-document messaging）。
这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。

a.html代码：

    
使用postMessage实现跨域
    

        
    

    

b.html代码：

postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即“协议 + 域名 + 端口”。也可以设为*，表示不限制域名，向所有窗口发送。
github