同源&跨域（JSONP，CORS，降域，PostMessage）

同源策略

浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

本域指的是？

• 同协议：如都是http或者https
• 同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
• 同端口：如都是80端口

同源：

• http://jirengu.com/a/b.js 和 http://jirengu.com/index.php (同源)

不同源：

• http://jirengu.com/main.js 和 https://jirengu.com/a.php (协议不同)
• http://jirengu.com/main.js 和 http://bbs.jirengu.com/a.php (域名不同，域名必须完全相同才可以)
• http://jiengu.com/main.js 和 http://jirengu.com:8080/a.php (端口不同,第一个是80）

需要注意的是: 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域

什么是跨域？

跨域就是Ajax请求的地址与当前页面的url不是同源，即要么不同协议，要么不同域名，要么不同端口。
举个例子， 这是一个简单的Ajax：请求的地址是http://127.0.0.1:8080/getWeather，

hello world

这是一个简单的服务器，支持静态页面和路由：

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)
    console.log(pathObj)

    switch (pathObj.pathname) {
        case '/getWeather':
            res.end(JSON.stringify({beijing: 'sunny'}))
            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)

这时打开服务器，运行js，输入url：http://localhost:8080/index.html，会出现如下效果：

image.png

这就是跨域，由于请求的地址是http://127.0.0.1:8080/getWeather，而当前的页面是http://localhost:8080/index.html，域名不同，就无法请求到数据。

那跨域是如何产生的？

有几种情况：1.请求根本没有发出去，直接被浏览器拦截掉了。2.请求发出去了，但服务器发现不一样，服务器没有响应。3.请求发出去了，服务器也响应了，但数据返回来之后，浏览器发现不是同源，给拦截掉了。

于是我们给js文件里面加一句话，如果请求出现了又执行发送了，便是第三种情况。

image.png

这时我们重启服务器，刷新页面，发现终端有了这句话：

image.png

也就是说，请求发出去后，服务器收到了，可是浏览器不接受，因为浏览器觉得数据不安全，换句话说，同源和跨域是浏览器的安全机制。

跨域的几种实现方式

JSONP

因为Ajax直接请求普通文件存在跨域无权限访问的问题，不管是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准。

不过我们Web页面上调用js文件时则不受是否跨域的影响，不仅如此，凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<\script>、<\img>、<\iframe>

那跟JSON又有什么关系呢？
因为JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据。

根据以上讲述，可以写一个简单的JSONP：

之前后端返回数据： {"city": "hangzhou", "weather": "晴天"} 现在后端返回数据： showData({"city": "hangzhou", "weather": "晴天"}) 前端script标签在加载数据后会把 「showData({“city”: “hangzhou”, “weather”: “晴天”})」做为 js 来执行，这实际上就是调用showData这个函数，同时参数是 {“city”: “hangzhou”, “weather”: “晴天”}。 用户只需要在加载提前在页面定义好showData这个全局函数，在函数内部处理参数即可。

下面看一个具体的：
index.html

  

    

    
    show news
  

server.js

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)

效果如下：

[图片上传失败...(image-63fd88-1551773332301)]
点击后：

[图片上传失败...(image-1b22a7-1551773332302)]
这里我们请求的是：http://127.0.0.1:8080/getNews?callback=appendHtml，但页面url是http://localhost:8080/index.html，不同源也能够请求数据。
因为后端做了判断：
[图片上传失败...(image-d59de2-1551773332302)]
返回的是

appendHtml(["第11日前瞻：中国冲击4金 博尔特再战200米羽球","正直播柴飚/洪炜出战 男双力争会师决赛","女排将死磕巴西！郎平安排男陪练模仿对方核心"])

然后这个appenHtml函数再到html文件中执行：

  function appendHtml(news){
    var html = '';
    for( var i=0; i';
    }
    console.log(html);
    $('.news').innerHTML = html;
  }

最后就是我们呈现的效果。

CORS

CORS（Cross-Origin Resource Sharing）

全名：跨域资源共享。是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。 实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。

什么意思呢？看如下代码：
server.js

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://localhost:8080')
      //res.setHeader('Access-Control-Allow-Origin','*')
      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)

index.html

  

    


    
    show news
  

可以看出html文件与Ajax没有区别，只不过在js文件中加了一句话：

 res.setHeader('Access-Control-Allow-Origin','http://localhost:8080')

打开服务器，输入网址：http://localhost:8080/index.html，效果如下：
[图片上传失败...(image-b32bb5-1551773332302)]
也实现了跨域。需要注意的是图中红色框的两个地方。

为了方便理解再看下面这张图：

[图片上传失败...(image-f05302-1551773332302)]

这就与上方的那段话对应上了：

• 当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回

降域

a.html

  
使用降域实现跨域
  

    
  

  

b.html

我们要进行的操作是：在http://a.jrg.com/a.html 页面请求 http://b.jrg.com/b.html。
效果如图：

image.png

不过需要注意的是在a.jrg.com不能够调用ifame，因为iframes里面是b.jrg.com。

image.png

但是在b.jrg.com可以：

image.png