同源策略 & 跨域

1. 同源策略（Same origin Policy）

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

本域指的是：

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

如：

http://baidu.com/a/b.js 和 h88ttp://baidu.com/index.php（同源）

不同源的例子：

http://baidu.com/a.js 和 https://baidu.com/a.php（协议不同）
http://baidu.com/a.js 和 http://bbs.baidu.com/a.php（域名不同，域名必须完全相同才可以）
http://baidu.com/a.js 和 http://baidu.com:8080/a.php（端口不同，第一个是80）

需要注意的是：对于当前页面来说，页面存放 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域（即：当前代码的执行环境）。

报错范例：

server，浏览器访问 http://locallhost:8080/index.html

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 '/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('<h1>404 Not Found</h1>')
        }else {
          res.end(data)
        }
      })
  }
}).listen(8080)

index.html

<h1>饥人谷</h1>
<script>
  var xhr = new XMLHttpRequest()
  xhr.open('GET', 'http://localhost:8080/getWeather', true)
  xhr.send()
  xhr.onload = function(){
    console.log(xhr.responseText)
  }
</script>

猜测出现报错的原因（报错：No 'Access-Control-Allow-origin' header ...):

请求未发出去，直接被浏览器拦截掉了；
请求发出去了，但服务器发现不一样，这是服务器未响应；
请求发出了，服务器也响应了，但是数据返回来之后浏览器发现不对，然后拦截掉了。

可能是这些原因导致我们的数据得不到，做个测试看到底是什么原因：

// server.js
case '/getWeather':
  console.log('get weather') // 查看它是否出现
  res.end(JSON.stringify({beijing:'sunny'}))
  break;

' get weather ' 这句话出现了，表示请求发出去了，服务器也响应了，但浏览器发现不对拦截掉了。
同源策略是浏览器的安全机制。

2. 跨域的几种方法

1. JSONP

HTML 中 script 标签可以加载其他域下的js，比如我们经常引入一个其他域下线上cdn的jQuery。那如何利用这个特性实现从其他域下获取数据呢？

可以先这样试试：

<script src="http://api.jirengu.com/weather.php"></script>

这时候会向天气接口发送请求获取数据，获取数据后做为 js 来执行。但这里有个问题，数据是 JSON 格式的数据，直接作为 JS 运行的话我如何去得到这个数据来操作呢？

这样试试：

<script src="http://api.jirengu.com/weather.php?callback=showData"></script>

这个请求到达后端后，后端会去解析 callback 这个参数获取到字符串showData，在发送数据做如下处理：

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

<script>
function showData(ret){
console.log(ret);
}
</script>
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>

这就是 JSONP(JSON with padding)，总结：

JSONP 是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP 需要对应接口的后端的配合才能实现。

JSONP 就是返回一个 JSON 然后给你加了一些东西。

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('<h1>404 Not Found</h1>')
        }else {
          res.end(data)
        }
      })
  }
}).listen(8080)

服务端代码注解（server.js）：

当收到参数 /getNews 时，返回一个数组 var news。
res.setHeader 是为了让我直接去访问这个请求时不出现乱码，这个是可要可不要的。
关键在于：

if(pathObj.query.callback){
  res.end(pathObj.query.callback + '(' +JSON.stringify(news) + ')')
}else {
  res.end(JSON.stringify(news))
}
break;
...
})

path.query 如果它有 callback 这个参数，那就 callback 加上 ( 加上数组再加上 )
else {res.end(JSON.stringify(news))} 如果没有 callback 这个参数就直接发数据。

后端要做的实际以前就是直接发送数据，现在加了一个判断，相当于这个接口就支持跨域了，支持 JSONP 了。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSONP</title>
</head>
<body>
  <div class="container">
    <ul class="news">
    </ul>
    <button class="show">show news</button>
  </div>

  <script>
    $('.show').addEventListen('click', function(){
      var script = document.createElement('script');
      script.src = 'http://127.0.0.1:8080/getNews?callback=appendHtml';
      document.head.appendChild(script);
      document.head.removeChild(script);
    })

    function appendHtml(news) {
      var html = '';
      for(var i = 0; i < news.length; i++){
        html += '<li>' +news[i] + '</li>';
      }
      console.log(html);
      $('.news').innerHTML = html;
    }

    function $(selector){
      return document.querySelector(selector);
    }
  </script>
</body>
</html>

静态页面代码注解（index.html）：
功能作用：当点击按钮时，向后台发个请求获取数据，获取到数据之后，再把数据拼装 DOM 放到页面上。

当点击按钮时，先去创建一个 script 标签
var script = document.createElement('script')
然后给这个 script 设置 src 的标签
script.src = 'http://127.0.0.1:8080/getNews?callback=appendHtml'
src 里面有个 getNews，有个 callback=appendHtml。
而我们全局下面有一个 appendHtml这样一个方法
function appendHtml(news){}
然后再把 script 标签放到 head 上
document.head.appendChild(script)
放上后为了让 HTML 看起来干净一点，再把 script 标签移除掉

只要把 script 标签放上去，它就会向这个东西发请求，获取到之后就会去执行，不管后面是否去移除 script 标签。

当创建标签、设置 src 之后，这是浏览器会向这个 src 里的东西发送请求。发送请求得到的是 appendHtml(数组) 这个数据，这个数据到来之后，由于我们把 script 标签放到页面上，这个数据就会当成 JS 去执行。执行它时，因为页面上已经有了 appendHtml 这个函数，所以就会执行这个函数，把 appendHtml(数组) 作为参数传递进去。

打开终端，输入 node server.js ，浏览器打开 http://localhost:8080/index.html

3. 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('<h1>404 Not Found</h1>')
        }else{
          res.end(data)
        }
      }) 
  }
}).listen(8080)

服务端代码注解（server.js）：
还是一样的，只是在返回数据时有一个 setHeader 设置响应头：
res.setHeader('Access-Control-Allow-Origin','http://localhost:8080')
加上了 'Access-Control-Allow-Origin'（访问控制），允许的域是 'http://localhost:8080' （注意协议、域名、端口）这个。
换句话说，加了这句话，浏览器看到这句话之后就表示：如果我的域和它允许的是一样的，就可以去响应，继续去处理返回的数据。

CROS 就是让 ajax 本身支持跨域请求。
res.setHeader('Access-Control-Allow-Origin','*')
星号指：任何人都可以使用我的数据，浏览器允许任何人获取数据。
对于老的浏览器，比如 IE10 以下的，就可以使用 JSONP 的方式

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSONP</title>
</head>
<body>
  <div class="container">
    <ul class="news">
    </ul>
    <button class="show">show news</button>
  </div>

  <script>
    $('.show').addEventListen('click', function(){
      var xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://127.0.0.1:8080/getNews', true)
      xhr.send()
      xhr.onload = function(){
        appendHtml(JSON.parse(xhr.responseText))
      }
    })

    function appendHtml(news) {
      var html = '';
      for(var i = 0; i < news.length; i++){
        html += '<li>' +news[i] + '</li>';
      }
      $('.news').innerHTML = html;
    }

    function $(selector){
      return document.querySelector(selector);
    }
  </script>
</body>
</html>

静态页面代码注解（index.html）：
前端其实就是发生了 ajax 请求。

启动终端，执行 node server.js ，浏览器打开 http://localhost:8080/index.html，查看效果和网络请求。

4. 降域

JSONP 和 CORS 本质上是像一个不同域下的接口去获取数据，有时会涉及到另一种跨域（跨域是因为浏览器会阻止），不同域下的 iframe 的一个操作。

使用 iframe 可以显示，但无法使用 JS ，获取都不能获取到。

范例:

a.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>a.html</title>
    <style>
      .ct{
        width: 910px;
        margin: auto;
      }
      .main{
        float: left;
        width: 450px;
        height: 300px;
        border: 1px solid #ccc;
      }
      .main input{
        margin: 20px;
        width: 200px;
      }
      .iframe{
        float: right;
      }
      iframe{
        width: 450px;
        height: 300px;
        border: 1px dashed #ccc;
      }
    </style>
  </head>
  <body>
    <div class="ct">
      <h1>使用降域实现跨域</h1>
      <div class="main">
        <input type="text" placeholder="http://a.jrg.com:8080/a.html">
      </div>

      <iframe src="http://b.jrg.com:8080/b.html" frameborder="0" ></iframe>
    </div>

    <script>
      //URL: http://a.jrg.com:8080/a.html
      document.querySelector('.main input').addEventListener('input', function(){
        console.log(this.value);
        window.frames[0].document.querySelector('input').value = this.value;
      })
      document.domain = "jrg.com"
    </script>
  </body>
</html>

b.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>b.html</title>
    <style>
      html,body{
        margin: 0;
      }
      input{
        margin: 20px;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <input id="input" type="text"  placeholder="http://b.jrg.com:8080/b.html">
    <script>
      // URL: http://b.jrg.com:8080/b.html

      document.querySelector('#input').addEventListener('input', function(){
        window.parent.document.querySelector('input').value = this.value;
      })
      document.domain = 'jrg.com';
    </script>
  </body>
</html>

document.domain = "jrg.com" 让当前域实现降域。
有 "http://a.jrg.com:8080/a.html" 和 "http://b.jrg.com:8080/b.html"（iframe）这两个地址，他们俩 jrg.com:8080... 这后面的部分是一样的，两个域名不一样的不能进行降域。

5. postMessage

没有主域的限制。有两个域名，域名不同。

范例:

a.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>a.html</title>
    <style>
      .ct{
        width: 910px;
        margin: auto;
      }
      .main{
        float: left;
        width: 450px;
        height: 300px;
        border: 1px solid #ccc;
      }
      .main input{
        margin: 20px;
        width: 200px;
      }
      .iframe{
        float: right;
      }
      iframe{
        width: 450px;
        height: 300px;
        border: 1px dashed #ccc;
      }
    </style>
  </head>
  <body>
    <div class="ct">
      <h1>使用postMessage实现跨域</h1>
      <div class="main">
        <input type="text" placeholder="http://a.jrg.com:8080/a.html">
      </div>

      <iframe src="http://localhost:8080/b.html" frameborder="0" ></iframe>

    </div>

    <script>
      //URL: http://a.jrg.com:8080/a.html
      $('.main input').addEventListener('input', function(){
        console.log(this.value);
        window.frames[0].postMessage(this.value,'*');
      })
      window.addEventListener('message',function(e) {
        $('.main input').value = e.data
        console.log(e.data);
      });
      function $(id){
        return document.querySelector(id);
      }
    </script>
  </body>
</html>

b.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>b.html</title>
    <style>
      html,body{
        margin: 0;
      }
      input{
        margin: 20px;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <input id="input" type="text"  placeholder="http://b.jrg.com:8080/b.html">
    <script>
      // URL: http://b.jrg.com:8080/b.html

      $('#input').addEventListener('input', function(){
        window.parent.postMessage(this.value, '*');
      })
      window.addEventListener('message',function(e) {
        $('#input').value = e.data
        console.log(e.data);
      });
      function $(id){
        return document.querySelector(id);
      } 
    </script>
  </body>
</html>

postMessage 原理：
当我们需要和 iframe 里的东西进行操作时，我们会向当前这个 iframe 去 postMessage 一个东西。
因为我要操作里面的东西，但我并·不能直接去操作，而是发送一个消息，只要你愿意处理这个消息，那你就可以再给我一个响应，而不是像以前一样，我可以直接获取到你的 DOM，可以直接去修改你的 JS。

范例中就是：我像 window.frames[0] 直接 post 这么一个 Message(this.value, '*') （这个星号表示在任何域下都可以去接受）。

对于 b（我本身这个页面），我可以监听 message 这么一个事件。当听到 message 这一个事件时，那我就知道有人嵌套了我，给我发了一个消息。那我就可以获取到这个数据，获取到这个数据之后，我就去做对应的事情。这样的话我就可以定义出一些接口了。
我告诉你，假设你嵌套我的页面之后，如果你想去操作我的东西，那你直接操作不了。你可以去发这个消息，而我内部对这个消息有一种实现。这样的话我们之间就可以互通了。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,294评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,493评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,790评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,595评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,718评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,906评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,053评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,797评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,250评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,570评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,711评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,388评论 4赞 332
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,018评论 3赞 316
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,796评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,023评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,461评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,595评论 2赞 350

同源策略 & 跨域

1. 同源策略（Same origin Policy）

报错范例：

2. 跨域的几种方法

1. JSONP

3. CORS

4. 降域

5. postMessage

推荐阅读更多精彩内容