经常使用的前端跨域的几种方式

前端跨域

前端跨域有多少种状况

• CORS 跨域
• jsonp 跨域
• postMessage
• document.domain 通常状况下咱们使用比较多的就是 Cross-Origin和 jsonp 这两种方式。postMessage 和 document.domain 使用的不是不少。下面我会介绍他们如何使用和使用的场景还有一些不常见的问题。

CORS

全拼 cross-origin resource sharing，意思是跨域资源共享。咱们先看看浏览器的兼容性，以下图：

注意： 因此要使用 CORS 进行跨域的话，必须注意客户端和服务器必须同时支持。

浏览器将 CORS 请求分红两类：简单请求（simple request）和非简单请求（not-so-simple request），咱们看看如何区分

1.请求方法是如下三种方法之一：

• HEAD
• GET
• POST

2.HTTP的头信息不超出如下几种字段：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type ：只限于三个值 application/x-www-form-urlencoded 、multipart/form-data、text/plain

简单请求（simple request）

• 对于简单请求，浏览器直接发出CORS请求。具体来讲，就是在头信息之中，增长一个Origin字段。Origin字段用来讲明，本次请求来自哪一个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否赞成此次请求。

• 若是 Origin 指定的源，不在许可范围内，服务器会返回一个正常的 HTTP 回应。浏览器发现，这个回应的头信息没有包含 Access-Control-Allow-Origin 字段（详见下文），就知道出错了，从而抛出一个错误，被 XMLHttpRequest 的 onerror 回调函数捕获。注意，这种错误没法经过状态码识别，由于 HTTP 回应的状态码有多是200。（若是咱们使用的 fetch，那么 fetch 会自动触发一个错误，那么这个时候咱们能够经过 promise.catch() 方法可捕获这个错误信息）。

• 若是 Origin 指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段

// 该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求
  Access-Control-Allow-Origin: http://api.bob.com
  // 该字段可选。它的值是一个布尔值，表示是否容许发送Cookie，若是须要发送cookie那么就设置为true，不然不会含有这个字段
  // 若是要发送cookie，那么还须要设置 var xhr = new XMLHttpRequest(); xhr.withCredentials = true;
  Access-Control-Allow-Credentials: true
  // 该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：
  // Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma
  // 若是想拿到其余字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定
  // getResponseHeader('FooBar')能够返回FooBar字段的值。
  Access-Control-Expose-Headers: FooBar

复制代码

须要注意的是，若是要发送 Cookie，Access-Control-Allow-Origin就不能设为*，必须指定明确的、与请求网页的域名一致。

非简单请求（not-so-simple request）

• 非简单请求的 CORS 请求，会在正式通讯以前，增长一次 HTTP 查询请求，称为 预检请求（preflight）。

• 预检请求 用的请求方法是 OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是 Origin，表示请求来自哪一个源。

• 除了 Origin 字段，"预检"请求的头信息包括两个特殊字段

// 该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。
  Access-Control-Request-Method: PUT
  // 该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段
  Access-Control-Request-Headers: X-Custom-Header

复制代码

• 服务器收到预检请求之后，检查了 Origin、Request-Method 和 Request-Headers 字段之后，确认容许跨源请求，就能够作出回应。若是浏览器否认了"预检"请求，会返回一个正常的 HTTP 回应，可是没有任何 CORS 相关的头信息字段。这时，浏览器就会认定，服务器不一样意预检请求，所以触发一个错误，被 XMLHttpRequest 对象的 onerror 回调函数捕获

// 该字段必需, 字段也能够设为星号，表示赞成任意跨源请求
  Access-Control-Allow-Origin: *
  // 该字段必需，它的值是逗号分隔的一个字符串，代表服务器支持的全部跨域请求的方法。
  // 注意，返回的是全部支持的方法，而不单是浏览器请求的那个方法。这是为了不屡次"预检"请求。
  Access-Control-Allow-Methods: GET, POST, PUT
  // 若是浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。
  // 它也是一个逗号分隔的字符串，代表服务器支持的全部头信息字段，不限于浏览器在"预检"中请求的字段。
  Access-Control-Allow-Headers: X-Custom-Header
  // 该字段可选
  // 该字段与简单请求时的含义相同
  Access-Control-Allow-Credentials: true
  // 该字段可选，用来指定本次预检请求的有效期，单位为秒。
  // 即容许缓存该条回应1728000秒（即20天），在此期间，不用发出另外一条预检请求。
  Access-Control-Max-Age: 1728000

复制代码

一旦服务器经过了"预检"请求，之后每次浏览器正常的 CORS 请求，就都跟简单请求同样，会有一个 Origin 头信息字段。服务器的回应，也都会有一个 Access-Control-Allow-Origin 头信息字段。

咱们以 koa为列，在demo中这么设置就能够了

// 下面是对cors进行的设置，在返回的headers中添加以下字段,也可使用 koa2-cors 
  app.use(async (ctx, next) => {
    // 容许来自全部域名请求，请求携带了cookie就不能设置为 * 
    ctx.set("Access-Control-Allow-Origin", "http://10.105.16.162:3000");
    // 设置所容许的HTTP请求方法
    ctx.set("Access-Control-Allow-Methods", "GET,POST");
    // 它也是一个逗号分隔的字符串，代表服务器支持的全部头信息字段.
    ctx.set("Access-Control-Allow-Headers", "x-requested-with,accept,origin,content-type");
    // 该字段可选。它的值是一个布尔值，表示是否容许发送Cookie。默认状况下，Cookie不包括在CORS请求之中。
    // 当设置成容许请求携带cookie时，须要保证"Access-Control-Allow-Origin"是服务器有的域名，而不能是"*";
    ctx.set("Access-Control-Allow-Credentials", true);
    await next();
  });  

复制代码

jonsp 跨域

jonsp跨域的原理是经过动态建立script的标签的形式来实现跨域的，由于script不受同源策略的影响。可是jsonp只能接受get方法。 看看下面的代码是如何封装的，并作了超时设置。

const defaultOptions = {
    timeout: 15000,
    uid: 0,
    perfix: '_jsp',
    name: 'callBack',
}
const jsp = (url, params, options = {}) => {
  let timer = null;
  const options = Object.assign({}, defaultOptions, options);
  const callBackName = `${options.perfix}_${options.name}_${options.uid++}`;
  const paramsKeys = Object.entries(params);

  url += `?${callback}=${callBackName}`;
  url = paramsKeys.reduce((initUrl, [k, v]) => {
    return `${initUrl}&${k}=${v}`;
  }, url);

  const body = document.getElementByTagName(body)[0];
  const script = document.createElement('script');
  script.src = url;
  body.appendChild(script);
  
  const clean = () => {
    if (timer) {
      clearInterval(timer);
      timer = null;
      body.removeChild(script);
      window[callBackName] = null;
    }
  };
  return new Promise((resolve, reject) => {
    window[callBackName] = function(data) {
      clear();
      return resolve(data);
    };
    timer = setTimeout(() => {
      clear();
      return reject('请求超时了');
    }, options.time);
  });
}

复制代码

postMessage (这是HTML5提供的方法，IE8+才支持) 能够实现两个窗口之间的通讯，是否是同源不重要

它可用于解决如下方面的问题：

• 页面和其打开的新窗口的数据传递
• 多窗口之间消息传递
• 页面与嵌套的iframe消息传递

使用方法：postMessage(data, origin) 方法接受两个参数 data html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，因此传参时最好用 JSON.stringify()序列化。IE10才开始支持对象形式。 origin 协议+主机+端口号，也能够设置为 *，表示能够传递给任意窗口，若是要指定和当前窗口同源的话设置为 /。

// 发送窗口代码：
  const ifr = document.createElement('iframe');
  ifr.src = 'http://localhost:3001';
  ifr.display = 'none';
  document.body.append(ifr);
  
  ifr.onload  = function() {
    const doc = ifr.contentWindow;
    // 目标源 能够限定具体的 协议 + 域名 + 端口 或者是 *
    const targetOrigin = 'http://localhost:3001';
    // 发送消息 doc能够是window.open() 也能够是嵌套的iframe
    // 发送的消息能够是 string 或者 object（IE10才支持）
    doc.postMessage('hello world', targetOrigin);
  }

  // 接收窗口代码：
  window.addEventListener('message', (e)=> { // 必须是window不能是document监听
    // 数据
    const data = e.data;
    // 消息是从哪一个源发送来的
    const origin = e.origin;
    // 发送消息窗口 
    const source = e.source;
    // 经过source回传消息 一样在发送消息的窗口也须要监听
    source.postMessage('hi shenxuxiang', 'http://localhost:3000');
  },false)

复制代码

document.domain

此方案仅限主域相同，子域不一样的跨域应用场景。实现原理：两个页面都经过js强制设置document.domain为基础主域，就实现了同域。 以后就能够共享window下的属性。

// www.a.com/a.html页面中的代码

  document.domain = 'a.com';
  const ifr = document.createElement('iframe');
  ifr.src = 'http://www.script.a.com/b.html';
  ifr.display = 'none';
  document.body.append(ifr);
  ifr.onload  = function() {
    const doc = ifr.contentWindow;
    console.log(doc.name); // shenxuxiang
  }

  // www.script.a.com/b.html页面中的代码
  document.domain = 'a.com';
  window.name = 'shenxuxiang';

复制代码

上面一共介绍了4种前端跨域的方法，jsonp 和 cors 能够和后台进行跨域，而 postMessage 和 domain 适合页面间的通信。页面间的跨域还有可使用 window.name | location.hash。若是想了解的能够点击这里

参考

Cross-Origin Resource Sharing MDN