跨域的三种方式

2019-11-18 本文已影响0人奔云

第一部分: 内容提要

介绍下跨域的三种常见方式:

JSONP (常用,兼容性好)
CORS (简单,效率)
postMessage (小众,安全,局限)

第二部分: 前置知识

在聊跨域之前,我们需要知道什么是跨域,为什么要跨域. 那是因为浏览器有同源策略的存在.

什么是同源策略呢?

它是浏览器基于安全保护而应运而生的一种安全模型,它控制着网页中DOM之间的访问
一款浏览器不可能让A域名去执行B域名的JavaScript代码(除非B域名开发了外链数据接口), 这样会造成数据污染,难以清理.
同源的意思是: 同协议 && 同域名 && 同端口 ( 三者同时都要满足才叫同源)
http://abc.com/main.js 与 https://abc.com/main.php 不同源 (协议不同)
http://abc.com/main.js 与 http://cba.com/main.php 不同源 (域名不同,域名须一致)
http://abc.com/main.js 与 https://abc.com:8080/a.php 不同源 (端口不同, 第一个是80)

那是什么是跨域呢?

因为有浏览器同源策略的存在, 就有了跨域的需求.
a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动过程就是跨域.

第三部分: 跨域的实现

跨域实现方法一: JSONP

原理:

我们知道, 在网上使用一些标签的 scr.link..herf..等属性去get网络上的一些静态资源,
这表明这些 scr.link..等没有受到同源策略的限制. 这给JSONP跨域的实现提供了契机..
我们还知道到同源策略是浏览器的安全机制模型,
如果把它掰开来看就是: 一个请求发出去->一定会得到了响应和需求的数据,
但是在最后传输到浏览器的最后门口,被的同源策略给拒之门外.
问题来了, 怎么让请求的数据不被拒之门外呢? ....
我们可以让请求端声明一个函数,让后端来执行这个函数,
参数携带数据回来,这里有个前提是: 参数的命名,须前后端事先约好.
JSONP核心就是这个参数(callback), get请求发出去, 应用callback 函数参数来获取请求的数据.

实现过程:

在当前所在html中创建一个srcipt标签，将src设置为接口地址，
服务器那边以获取callback中的参数值+要发送的数据以json字符串的形式回应，
页面获取到数据调用同callback参数值的方法名来展现数据

JSONP演示案例:
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){ // 核心代码, 应用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)

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'; //创建一个script,用src请求的跨域服务器, 如果有,则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>

跨域实现方法二: CORS

是跨域资源分享（Cross-Origin Resource Sharing）的缩写.

流程如下:

网页上发送XHLHttpRequest的时候, 浏览器判断这个发送的请求是否同源.

发现不同源 --> 给这个请求加上一个请求头: Origin, 并做一些处理.

不同源的服务器收到请求,进行处理后,在发送数据的时候,会加入一个响应头: Access-Control-Allow-Origin (进入浏览器的凭证)

最后，数据来到浏览器门口，浏览器看这段数据是否包含自己处理过的Ｏrigin值.

如果有, 请进; 没有,一边凉快去.

CORS演示案例:
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') // 核心代码 给请求头添加验证码:Access-Control-Allow-Origin
      //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>

跨域实现方法三: postMessage

postMessage 原理:

postMessage 是 HTML5 中新增方法，可实现跨域通信；

postMessage 并不是向服务器读写资源，只是向外发送消息而已；可以把它当做使用手机发送短信消息，仅此而已。

也就是：A 页面向 B 页面发送了一条消息，B 页面会接受到该消息，如果 B 页面需要该消息，则监听 message；否则无需关心该消息

发送方：为目标元素添加事件处理程序，监听事件类型

接收方：为 window 添加事件处理程序，事件类型为 messag

案例:

1）页面的说明：
A 页面的域为 a.com；A 页面拥有两个元素 input 输入框、ifream，ifream引入 B 页面资源；
B 页面的域为 b.com；B 页面拥有一个元素 input 输入框
2）实现的功能：在任意 input 输入框中输入值时，另外一个 input 输入框同步显示输入的值

A 页面代码 a.com

   var input = document.querySelector('.main input');
        input.addEventListener('input', function () {
            console.log('window:' + this.value);
            window.frames[0].postMessage(this.value, '*');
        });

        window.addEventListener('message', function (e) {
            console.log('window:'+ e.data);
            input.value = e.data;
        })

B 页面代码 b.com

var input = document.querySelector('input');
    input.addEventListener('input', function () {
        console.log('iframe:'+ this.value);
        window.parent.postMessage(this.value, 'http://a.com:8080');
    });

    window.addEventListener('message', function (e) {
        console.log('ifream:'+ e.data);
        input.value = e.data;
    })

postMessage 的注意点

这样就解除了降域的限制，可以将 postMessage 应用到各个不同的域之间，
实现跨域访问。该方式比较安全，因为对方并不能直接操控我方资源，
仅仅是发了一条消息，相当于指令，而最终操作权限仍在自己手中

虽然解决了降域的限制，但是：postMessage 是 window 的一个方法，
话句话说：它的弱点是只能向 window 窗口发送消息。
所以使用时至少要有一个 window 才行，postMessage 不可以向其他域名发送消息