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

作者: 弹指一挥间_e5a3 | 来源:发表于2019-03-05 16:09 被阅读0次

同源策略

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

本域指的是？

同协议：如都是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，

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

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

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('<h1>404 NOT FOUND</h1>')
            }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：

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

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

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

<!DOCTYPE html>
<html>
<body>
  <div class="container">
    <ul class="news">
    </ul>
    <button class="show">show news</button>
  </div>

<script>

  $('.show').addEventListener('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 $(id){
    return document.querySelector(id);
  }
</script>

</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 '/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)

效果如下：

[图片上传失败...(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<news.length; i++){
      html += '<li>' + news[i] + '</li>';
    }
    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('<h1>404 Not Found</h1>')
        }else{
          res.end(data)
        }
      }) 
  }
}).listen(8080)

index.html

<!DOCTYPE html>
<html>
<body>
  <div class="container">
    <ul class="news">

    </ul>
    <button class="show">show news</button>
  </div>

<script>

  $('.show').addEventListener('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>
</html>

可以看出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

<html>
<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>

<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>
</html>

b.html

<html>
<style>
    html,body{
        margin: 0;
    }
    input{
        margin: 20px;
        width: 200px;
    }
</style>

    <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>
</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

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

同源策略

本域指的是？

什么是跨域？

那跨域是如何产生的？

跨域的几种实现方式

JSONP

CORS

CORS（Cross-Origin Resource Sharing）

降域

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读