跨域问题详解

一、什么是跨域？

什么是同源策略及其限制内容？

同源策略

同源策略是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指“协议+域名+端口”三者相同，即便两个不同的域名指向同一个IP地址，也非同源。

同源策略限制内容

如果非同源，下面三种行为会受到限制：

• Cookie、LocalStorage、IndexedDB等存储性内容，无法读取
• DOM节点，无法获得
• AJAX请求发送后，数据被浏览器拦截
  但是有三个标签是允许跨域加载资源：

<img src=“”/>
<link href=“”>
<script src=“”>

常见跨域场景

当协议、域名、端口号中任意一个不同时，都算做不同域。不同域之间请求资源，就算做跨域。常见的跨域场景：

需要说明的是：
第一，如果是协议和端口造成的跨域问题，前台是无能为力的。
第二，在跨域问题上，仅仅是通过“URL首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL首部”指的就是协议，域名和端口号
注意，跨域并不是请求发不出去，请求能发出去，服务端能就收到请求并正常返回结果，只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求，为什么Ajax就不会？因为归根结底，跨域是为了阻止用户读取到另一个域名下的内容，Ajax可以获取响应，但浏览器认为这个不安全，所以拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。这也说明了跨域并不能完全阻止CSRF，因为请求毕竟是发出去了。

ajax跨域的表现

我们如何根据浏览器的表现来分析是否是出现跨域问题呢？ajax请求时，如果存在跨域现象，并且没有进行解决，会有如下表现：
第一种现象，浏览器输出错误提示No 'Access-Control-Allow-Origin' header is present on the requested resource，并且The response had HTTP status code 404。
出现这种情况的原因如下：

• 本次ajax请求是“非简单请求”(CORS部分介绍)，所以请求前会发送一次预检请求（OPTIONS）
• 服务器端后台接口没有允许OPTIONS请求，导致无法找到对应接口地址

解决方案：后端允许options请求

第二种现象，浏览器输出错误提示No 'Access-Control-Allow-Origin' header is present on the requested resource，并且The response had HTTP status code 405。
这种现象与第一种有区别，这种情况下，后台方法允许OPTIONS请求，但是一些配置文件中（如安全配置），阻止了OPTIONS请求，才会导致这个现象。
解决方案：后端关闭对应的安全配置

第三种现象，浏览器输出错误提示No 'Access-Control-Allow-Origin' header is present on the requested resource，并且status 200。
这种情况下，服务器端后台允许OPTIONS请求，并且接口也允许OPTIONS请求，但是头部匹配时出现不匹配现象。比如，origin头部检查不匹配或者少了一些头部的支持（如常见的X-Requested-Width头部），然后服务器端就会将response返回给前端，前端检测到这个后就触发XHR。onerror，导致前端控制台报错。
解决方案：后端增加对应的头部支持

第四种现象，浏览器输出错误提示header contains multiple values ',’。
表现现象是，后台响应的http请求头部信息有两个Access-Control-Allow-Origin：*。出现这种问题的原因就是进行跨域配置的人不了解原理，导致了重复配置，如：

• 常见于.net后台（一般在web.config中配置了一次origin，然后代码中又手动添加了一次origin，比如代码手动设置了返回*）
• 常见于.net后台（在IIS和项目的web.config中同时设置origin:*）

解决方案：建议删除手动添加的以及IIS中设置的，只用项目配置中的即可

二、Ajax同源请求

AJAX这个词2005年2月正式提出，它是Asynchronous JavaScript and XML的缩写，是指通过javascript的异步通信，从服务器获取XML文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个页面。现在服务器返回的都是JSON格式，XML格式已经过时了，但是AJAX这个叫法已经成了一个通用名字，不再是字面含义。
AJAX包括以下几个步骤：

• 创建XMLHttpRequest实例
• 发出http请求
• 接收服务器传回的数据
• 更新网页数据

//建立XMLHttpRequest对象 因为ajax和后台沟通是靠发HTTP请求来实现的
var xhr = new XMLHttpRequest(); 

// 指定通信过程中状态改变时的回调函数 
xhr.onreadystatechange = function(){ 
//具体的过程是：readyState是XMLHttpRequest请求当前所处的状态，状态有五个值。当等于4的时候说明服务器已经完全接收了。 
// 通信成功时，状态值为4 
//每当这个状态有变化的时候，readyState的值就会变，每次变就会触发readystatechange这个事件，紧接着这个事件就会调用

    if ((xhr.status >= 200 && xhr.status < 300) || (xhr.status === 304)){ 
        //这个回调函数。（第三行的函数） 
        if (xhr.status === 200){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
            //一句话总结就是：XMLHttpRequest的状态变，导致readyState变，readyState变触发readystatechaneg这个事件，这个事件调用回调函数
            console.log(xhr.responseText); 
            //好好品味这句话：xhr.onreadystatechange=function(){},核心点是：给xhr添加了一个readystatechange事件。事件调用了函数 

        } else { 
            console.error(xhr.statusText); 
        } 
    } 
};

xhr.onload = function () {
    // 返回 http://example.com/test
    console.log(xhr.responseURL);
};

xhr.onabort = function () {
  console.log('The request was aborted');
};

xhr.onprogress = function (event) {
  console.log(event.loaded);
  console.log(event.total);
};

xhr.onerror = function (e) { 
    console.error(xhr.statusText); 
};

//超时
xhr.ontimeout = function () {
  console.error('The request for ' + url + ' timed out.');
};

// open方式用于指定HTTP动词、请求的网址、是否异步 
xhr.open('GET', '/endpoint', true); 

xhr.responseType = 'text';

// 指定 10 秒钟超时
xhr.timeout = 10 * 1000;
xhr.withCredentials = true;  //跨域请求时，用户信息（比如 Cookie 和认证的 HTTP 头信息）会包含在请求之中
// 发送HTTP请求 
xhr.send(null);  //参数可选，当参数为空时，表示请求不带参数，也可以携带参数

//上面请求方式等同于
var data = ‘id=3&time=2333';
xhr.open('GET', '/endpoint', true);
xhr.send(data);

XMLHttpRequest.readyState

返回一个整数，表示当前实例对象的状态，该属性只读。有以下几种取值：

• 0，表示XMLHttpRequest的实例对象已经生成但是实例的open()方法还没有被调用。
• 1，表示open()方法已经调用，但是send()方法还没有被调用。仍然可以使用setRequestHeader()，设置http请求的头信息。
• 2，表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。
• 3，表示正在接受服务器传来的消息体（body部分）。这时，如果实例的responseType属性等于text或者空字符串，responseType属性就会包含已经收到的部分信息。
• 4，表示服务器发送的数据已经完全接收，或者本次接收已经失败。

通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会发生变化。这个值每一次变化，都会触发readyStateChange事件。
XMLHttpRequest.onreadystatechange属性指向一个监听函数。readystatechange事件发生时（实例的readyState属性变化），就会执行这个属性。

XMLHttpRequest.responseType

该属性是一个字符串，表示服务器返回数据的类型。这个属性是可写的，可以在调用open()方法之后，调用send()方法之前，设置这个属性的值，告诉服务器返回指定类型数据。如果responseType设置为空字符串，等同于默认值text。

• ""（空字符串），等同于text，表示服务器返回文本数据
• “arraybuffer”，ArrayBuffer对象，表示服务器返回二进制数组，可以按照数组的方式处理二进制数据。
• “blob”，Blob对象，表示服务器返回二进制对象，适合读取二进制数据，比如图片文件
• “document”，Document对象，表示服务器返回一个文档对象，适合返回HTML/XML文档的情况
• “json”，JSON对象，浏览器自动对返回数据调用JSON.parse()方法，获得一个json对象
• “text”，字符串

XMLHttpRequest.response

服务器返回的数据体（即http响应的body部分）。它的数据类型由responseType决定。只读。

XMLHttpRequest.responseURL

表示发送数据的服务器的地址。注意，这个值与open()方法指定的请求网址不一定相同。如果服务器端发生跳转，这个属性返回最后实际返回数据的网址。另外，如果原始URL包括锚点，该属性会把锚点剥离。

XMLHttpRequest.status，XMLHttpRequest.statusText

表示服务器响应的HTTP状态码。一般来说，如果通信成功的话，状态码是200；如果服务器没有返回状态码，那么这个属性默认是200。请求发出之前，该属性为0。只读。

• 200,OK，访问正常
• 301, Moved Permanently，永久移动
• 302, Move temporarily，暂时移动
• 304, Not Modified，未修改
• 307, Temporary Redirect，暂时重定向
• 401, Unauthorized，未授权
• 403, Forbidden，禁止访问
• 404, Not Found，未发现指定网址
• 500, Internal Server Error，服务器发生错误

XMLHttpRequest.timeout

表示多少毫秒后，如果请求仍然没有得到结果，就会自定终止。如果该属性等于0，就表示没有时间限制。

事件监听属性

XMLHttpRequest可以对以下事件指定监听函数：

• XMLHttpRequest.onloadstart：loadstart 事件（HTTP 请求发出）的监听函数
• XMLHttpRequest.onprogress：progress事件（正在发送和加载数据）的监听函数
  progress事件的监听函数有一个事件对象参数，该对象有三个属性：loaded属性返回已经传输的数据量，total属性返回总的数据量，lengthComputed属性返回一个布尔值，表示加载的进度是否可以计算。
• XMLHttpRequest.onabort：abort 事件（请求中止，比如用户调用了abort()方法）的监听函数
• XMLHttpRequest.onerror：error 事件（请求失败）的监听函数
• XMLHttpRequest.onload：load 事件（请求成功完成）的监听函数
• XMLHttpRequest.ontimeout：timeout 事件（用户指定的时限超过了，请求还未完成）的监听函数
• XMLHttpRequest.onloadend：loadend 事件（请求完成，不管成功或失败）的监听函数

XMLHttpRequest.withCredentials

是一个布尔值，表示跨域请求时，用户信息（比如cookie和认证的http头信息）是否被包含在请求中。默认为false，即发起跨域请求时，不会发送本机的cookie。
若需要跨域AJAX请求发送cookie，就要将withCredentials设置为true。注意，同源的请求不需要设置这个属性。
为了让这个属性生效，服务器也必须显示的返回Access-Control-Allow-Credentials这个头部信息。
withCredentials属性打开的话，跨域请求不仅会发送 Cookie，还会设置远程主机指定的 Cookie。反之也成立，如果withCredentials属性没有打开，那么跨域的 AJAX 请求即使明确要求浏览器设置 Cookie，浏览器也会忽略。

三、跨域解决方案

1、JSONP

JSONP解决跨域问题是一个比较古老的方案，实际中不推荐使用，如果在项目中要使用JSONP，一般会使用JQ等对JSONP进行了封装的类库来进行ajax请求。

实现原理

利用script标签没有跨域限制的漏洞，网页可以得到从其它来源动态产生的JSON数据。JSONP请求一定需要对方服务器做支持才可以。具体原理如下：

实现流程

• 声明一个回调函数，其函数名（如foo）当作参数值，要传递给跨域请求数据的服务器，函数形参为要获取目标数据（服务器返回的data）
• 创建一个script标签，把那个跨域的API数据接口地址复制给script的src，还要在这个地址中向服务器传递函数名（可以通过问号传参?callback=show）
• 服务器接收到请求后，需要进行特殊的处理：把传递进来的函数名和它需要给你的数据拼接成字符串，例如：传入的函数名是foo，它准备好的数据是foo(‘爱你哟！')
• 最后服务器把准备的数据通过HTTP协议返回给客户端，客户端再调用执行之前声明的回调函数（foo）

在开发中可能会遇到多个JSONP请求的回调函数名是相同的，这时候就需要自己封装一个JSONP函数。下面这段代码相当于向http://localhost:3000/say?wd=Iloveyou&callback=foo这个请求地址请求数据，然后后台返回foo(‘爱你呦！’)，最后会运行foo()这个函数。
注意，JSONP接口和普通接口返回数据是有区别的，接口在兼容JSONP请求的时候需要判断是否有对应关键字callback参数。

    //index.html
    function jsonp({ url, params, callback }) {
        return new Promise((resolve, reject) => {
            let script = document.createElement('script’);

            window[callback] = function(data) {
                resolve(data);
                document.body.removeChild(script);
            };

            params = { ...params, callback }; // wd=Iloveyou&callback=foo
            let arrs = [];

            for (let key in params) {
                arrs.push(`${key}=${params[key]}`);
            }
            script.src = `${url}?${arrs.join('&')}`;
            document.body.appendChild(script);
        })
    }
    jsonp({
        url: 'http://localhost:3000/say',
        params: { wd: 'Iloveyou' },
        callback: ‘foo'
    }).then(data => {
        console.log(data);
    })

    //server
    let express = require('express’);
    let app = express();

    app.get('/say', function(req, res) {
        let { wd, callback } = req.query;

        console.log(wd);        // Iloveyou
        console.log(callback);  // foo
        res.end(`${callback}('我不爱你')`);
    })
    app.listen(3000);

JSONP优缺点

JSONP优点是兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持“get”请求，不支持较为复杂的POST和其它请求。

2、CORS

CORS是一个W3C标准，全称是“跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器发出XMLHttpRequest请求，从而克服了Ajax只能同源使用的限制。目前几乎所有的浏览器ajax请求都是基于CORS机制的。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS的通信过程都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的Ajax通信没有差别，代码完全一样。浏览器发现AJAX请求跨域，会自动添加一些头信息，有时还会多出一次附加的请求，但用户不会有感觉。

两种请求

浏览器将CORS请求分为两类：简单请求（simple request）和非简单请求（no-so-simple request）。

如何判断请求的类型？

只要同时满足这两大条件，就属于简单请求。

• 请求方法是以下三种方法之一：HEAD、GET、POST

• HTTP的头信息不超过以下几个字段：

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

简单请求

对于简单请求，浏览器直接发出CORS请求。具体来说，浏览器发现这次跨源AJAX请求是简单请求，就自动在头信息中添加一个Origin字段，Origin字段用来说明本次请求来自哪个源（协议+域名+端口）。服务器根据这个值，决定是否同意这次请求。

• 如果Origin指定的源不在许可范围内，服务器会返回一个正常的HTTP响应。但是浏览器发现回应头信息中没有包含Access-Control-Allow-Origin字段，就知道出错了，然后抛出一个错误，被XMLHttpRequest的onerror捕获。这种错误是无法通过状态码识别，因为HTTP回应的状态码可能是200.

• 如果Origin指定的域名在许可范围内，服务器响应的头信息会增加几个以Access-Control-开头的头信息字段：

  • Access-Control-Allow-Origin
    该字段是必须的，它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
  • Access-Control-Allow-Credentials
    该字段可选。它的值是一个布尔值，表示是否允许发送cookie。默认情况下，cookie不包含在CORS请求中。设为true即表示服务器明确许可cookie可以包含在请求中，一起发给服务器。
    这个值只能设为true，如果服务器不需要浏览器发送cookie，删除该字段即可。
  • Access-Control-Allow-Headers
    该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Headers中指定。例如getResponseHeader(’token’).

widthCredentials

该属性在同源AJAX请求中已经介绍了，这里再做些补充。
上面说到，CORS请求默认是不发送用户信息，如果要不Cookie发到服务器，除了服务器设置Access-Control-Allow-Credentials：true外，开发者也要在AJAX请求中打开withCredentials属性，xhr.withCredentials=true。
否则即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。
如果省略设置withCredentials，有的浏览器也会在请求时发送Cookie。此时，可以显示的关闭withCredentials，xhr.withCredentials=false。

注意

• 如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。
• Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其它域名的Cookie并不会上传，且（跨源）原网页中的document.cookie也无法读取服务器域名下的cookie

非简单请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

预检请求

非简单请求的CORS请求，会在正式通信前，增加一次HTTP查询请求，称为“预检”请求（preflight），如上图左。
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用那些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
预检请求用的请求方法是OPTIONS，表示这个请求是用来询问的。请求的头信息里包含关键字段Origin，表示请求来自哪个源。除了Origin字段，预检请求的头信息包括两个特殊字段：

• Access-Control-Request-Method，该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法上，图中是POST
• Access-Control-Request-Headers，该字段是一个逗号分隔的字符串，指定浏览器CORS请求额外发送的头信息字段，图中是content-type,token,x-requested-with

预检请求的响应

服务器接到预检请求后，检查Origin，Access-Control-Request-Method，Access-Control-Request-Headers字段后，确认允许跨源请求，就可以做出响应，如图左Response Headers。
这个响应部分的关键字段就是Access-Control-Allow-Origin，图中表示http://192.168.6.164:8084可以请求数据。该字段也可以设置为 * ，表示同意任意跨源请求。
如果服务器否定了预检请求，会正常返回一个HTTP响应，但是没有任何CORS相关的头信息字段。这时浏览器在检查时就会认为服务器不同意预检请求，抛出错误被XMLHttpRequest对象的onerror函数捕获并打印错误。
服务器在允许跨源请求时，预检响应头返回的几个CORS相关字段：

• Access-Control-Allow-Origin，必需，允许请求数据的源
• Access-Control-Allow-Methods，必需，它是逗号分隔的一个字符串，表明服务器支持的所有跨域请求方法。注意，返回的是所有支持的方法，而不是单一的浏览器请求的那个方法，为了避免多次“预检”请求。
• Access-Control-Allow-Headers，如果请求中包含Access-Control-Request-Headers字段，则相应中该字段就是必需的。它是逗号分隔的字符串，表明服务器支持的所有头信息字段，但不限于预检请求中的字段
• Access-Control-Allow-Credentials，与简单请求中的含义相同
• Access-Control-Max-Age，可选，用来指定本次预检请求的有效期，单位为秒。在有效期内，不需要发出另一条预检请求。

浏览器的正常请求和响应

如上图右，浏览器预检通过后，浏览器正常的CORS请求就都跟简单请求一样。在请求头中浏览器会自动添加Origin字段，在服务器响应中，也必包含Access-Control-Allow-Origin字段。

与JSONP的比较

CORS和JSONP的使用目的相同，但是比JSONP更强大。
JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

3、postMessage

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多的可以跨域操作的window属性之一，它可以解决以下几个方面的内容：

• 页面和其打开的新窗口的数据传递
• 多窗口之间消息传递
• 页面与嵌套的iframe消息传递
• 上面三个场景的跨域数据传递
  postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可是实现跨文本档、多窗口、跨域消息传递。

语法

otherWindow.postMessage(message, targetOrigin, [transfer]);

• otherWindow
  其它窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.iframes。
• message
  将要发送到其它window的数据
• targetOrigin
  通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串“ * ”或者一个URI。在发送消息时，如果协议、主机地址或者端口号这三者中有任意一项不匹配targetOrigin提供的值，那么消息就不会被发送，只有三者完全匹配时消息才会发送。
  这样做的目的是防止数据泄漏。例如，当postMessage传递密码时，targetOrigin的值与包含这个密码的消息的预期接受者的origin属性完全一致，来防止密码被恶意的第三方截获。如果明确的知道接受方的URI，就不要设置为*。
• transfer(可选)
  是一串和message同时传递的transferable对象。这些消息的所有权将移交给消息的接受者，发送方将不再保有所有权。

安全问题

• 如果不希望从其他网站接收message，请不要为message事件添加任何事件监听器。这是一个安全万无一失的方式来避免安全问题。
• 如果确实需要从其他网站接收message，请始终使用origin和source属性验证发件人的身份。任何窗口都可以向任何其他窗口发送消息，并且不能保证未知发送者不发送恶意信息。但是，身份验证后，仍然需要始终验证接收到的消息的语法。否则，您信任只发送受信任邮件的网站中的安全漏洞可能会在您的网站中打开跨网站脚本漏洞。
• 当使用postMessage将数据发送到其它窗口时，始终指定精确的Origin，而不是*。恶意网站可以在你不知情的情况下更改窗口的位置，因此它可以拦截使用postMessage发送的数据。

兼容性

几乎所有新版浏览器，IE8+都支持。但是有些浏览器的低版本不支持（例如FireFox 4.0）

示例

/*
 * A窗口的域名是<http://example.com:8080>，以下是A窗口的script标签下的代码：
 */

var popup = window.open(...popup details...);

// 如果弹出框没有被阻止且加载完成

// 这行语句没有发送信息出去，即使假设当前页面没有改变location（因为targetOrigin设置不对）
popup.postMessage("The user is 'bob' and the password is 'secret'",
                  "https://secure.example.net");

// 假设当前页面没有改变location，这条语句会成功添加message到发送队列中去（targetOrigin设置对了）
popup.postMessage("hello there!", "http://example.org");

function receiveMessage(event)
{
  // 我们能相信信息的发送者吗?  (也许这个发送者和我们最初打开的不是同一个页面).
  if (event.origin !== "http://example.org")
    return;

  // event.source 是我们通过window.open打开的弹出页面 popup
  // event.data 是 popup发送给当前页面的消息 "hi there yourself!  the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);


/*
 * 弹出页 popup 域名是<http://example.org>，以下是script标签中的代码:
 */

//当A页面postMessage被调用后，这个function被addEventListenner调用
function receiveMessage(event)
{
  // 我们能信任信息来源吗？
  if (event.origin !== "http://example.com:8080")
    return;

  // event.source 就当前弹出页的来源页面
  // event.data 是 "hello there!"

  // 假设你已经验证了所受到信息的origin (任何时候你都应该这样做), 一个很方便的方式就是把enent.source
  // 作为回信的对象，并且把event.origin作为targetOrigin
  event.source.postMessage("hi there yourself!  the secret response " +
                           "is: rheeeeet!",
                           event.origin);
}

window.addEventListener("message", receiveMessage, false);

// a.html
<iframe src="http://localhost:4000/b.html" frameborder="0" id="frame" onload="load()"></iframe//等它加载完触发一个事件
  //内嵌在http://localhost:3000/a.html
<script>
    function load() {
        let frame = document.getElementById('frame')
        frame.contentWindow.postMessage('我爱你', 'http://localhost:4000') //发送数据
        window.onmessage = function(e) { //接受返回数据
            console.log(e.data) //我不爱你
        }
    }
</script>

// b.html
window.onmessage = function(e) {
    console.log(e.data) //我爱你
    e.source.postMessage('我不爱你', e.origin)
 }

4、websocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
var Socket = new WebSocket(url, [protocol] );
第一个参数URL是指定连接的url，第二个参数protocol是可选的，制定了可接受的子协议。

// socket.html
<div>user input：<input type="text"></div>
<script src="./socket.io.js"></script>
<script>
    var socket = io('http://www.domain2.com:8080');
    // 连接成功处理
    socket.on('connect', function() {
        // 监听服务端消息
        socket.on('message', function(msg) {
            console.log('data from server: ---> ' + msg);
        });
        // 监听服务端关闭
        socket.on('disconnect', function() {
            console.log('Server socket has closed.');
        });
    });
    document.getElementsByTagName('input')[0].onblur = function() {
        socket.send(this.value);
    };
</script>

//Nodejs socket后台：
var http = require('http');
var socket = require('socket.io');
// 启http服务
var server = http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-type': 'text/html'
    });
    res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');
// 监听socket连接
socket.listen(server).on('connection', function(client) {
    // 接收信息
    client.on('message', function(msg) {
        client.send('hello：' + msg);
        console.log('data from client: ---> ' + msg);
    });
    // 断开处理
    client.on('disconnect', function() {
        console.log('Client socket has closed.');
    });
});

5、Node中间件代理（两次跨域）

实现原理

同源策略是浏览器需要遵循的标准，而如果服务器向服务器请求就无需遵循同源策略。
代理服务器需要做以下步骤：

• 接收客户端请求
• 将请求转发给服务器
• 拿到服务器响应数据
• 将响应转发给客户端

以下实例经过两次跨域，浏览器向代理服务器发送请求时，也遵循同源策略。

// index.html(http://127.0.0.1:5500)
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
      $.ajax({
        url: 'http://localhost:3000',
        type: 'post',
        data: { name: 'xiamen', password: '123456' },
        contentType: 'application/json;charset=utf-8',
        success: function(result) {
          console.log(result) // {"title":"fontend","password":"123456"}
        },

        error: function(msg) {
          console.log(msg)
        }
      })
</script>

// server1.js 代理服务器(http://localhost:3000)
const http = require('http')

// 第一步：接受客户端请求
const server = http.createServer((request, response) => {
  // 代理服务器，直接和浏览器直接交互，需要设置CORS 的首部字段
  response.writeHead(200, {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Allow-Headers': 'Content-Type'
  })

  // 第二步：将请求转发给服务器
  const proxyRequest = http
    .request(
      {
        host: '127.0.0.1',
        port: 4000,
        url: '/',
        method: request.method,
        headers: request.headers
      },

      serverResponse = {
        // 第三步：收到服务器的响应
        var body = ''

        serverResponse.on('data', chunk => {
          body += chunk
        })

        serverResponse.on('end', () => {
          console.log('The data is ' + body)
          // 第四步：将响应结果转发给浏览器
          response.end(body)
        })
      }
    )
    .end()
})

server.listen(3000, () => {
  console.log('The proxyServer is running at http://localhost:3000')
})

// server2.js(http://localhost:4000)
const http = require('http')
const data = { title: 'fontend', password: '123456' }
const server = http.createServer((request, response) => {

  if (request.url === '/') {
    response.end(JSON.stringify(data))
  }
})

server.listen(4000, () => {
  console.log('The server is running at http://localhost:4000')
})

6、nginx反向代理

实现原理类似于node中间件代理，需要搭建一个中转nginx服务器，用于转发请求。
使用nginx反向代理实现跨域，是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题，支持所有浏览器，支持session，不需要修改任何代码，并且不影响服务器性能。
实现思路：通过nginx配置一个代理服务器（域名和domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中的domain信息，方便当前域cookie写入，实现跨域登录。

// proxy服务器
server {
    listen       80;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;


        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

7、window.name+iframe

window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的name值（2MB）。
以下例子中，onload事件会被触发两次：

• 第一次加载跨域页c.html，c.html页面设置了window.name的值。页面加载完成后触发onload事件，调用load方法，重新设置了iframe窗口的src值，这时会产生第二次页面加载
• b.html加载完成后触发第二次onload事件，此时iframe窗口中已经留有打开c.html页面时设置的window.name值，这个值就可以在代码中读取到

// a.html(http://localhost:3000/b.html)
// b为中间代理页，内容为空
<iframe src="http://localhost:4000/c.html" frameborder="0" onload="load()" id="iframe"></iframe>
<script>
    let first = true;
    let iframe = document.getElementById('iframe');

    // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
    function load() {
        if(first){
            // 第1次onload(跨域页)成功后，切换到同域代理页面
            iframe.src = 'http://localhost:3000/b.html';
            first = false;
        }else{
            // 第2次onload(同域b.html页)成功后，读取同域window.name中数据
            console.log(iframe.contentWindow.name);
        }
    }
</script>

 // c.html(http://localhost:4000/c.html)
<script>
    window.name = '我不爱你'
</script>

8、location.hash+iframe

实现原理：a.html欲与c.html跨域相互通信，通过中间页b.html来实现。三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。
实现步骤：一开始a.html给c.html传一个hash值，然后c.html接收到hash值后，再把hash值传给b.html，最后b.html将结果放到a.html的hash值中
以下例子，a.html和b.html是同域的，而c.html是跨域的

// a.html
  <iframe src="http://localhost:4000/c.html#iloveyou"></iframe>
  <script>
    window.onhashchange = function () { //检测hash的变化
      console.log(location.hash);
    }
  </script>

 // b.html
<script>
    window.parent.parent.location.hash = location.hash
    //b.html将结果放到a.html的hash值中，b.html可通过parent.parent访问a.html页面
</script>

 // c.html
 console.log(location.hash);
let iframe = document.createElement('iframe');

iframe.src = 'http://localhost:3000/b.html#idontloveyou';
document.body.appendChild(iframe);

9、document.domain+iframe

该方式只适用于二级域名相同的情况下，比如a.test.com和b.test.com适用于此方式。
实现方式：只需要给页面添加document.domain = ‘test.com’，表示二级域名都相同就可以实现跨域。
实现原理：两个页面都通过js强制设置了document.domain 为基础主域，就实现了同域。

// a.html
<body>
     hello，a
    <iframe src="http://b.zf1.cn:3000/b.html" frameborder="0" onload="load()" id="frame"></iframe>
    <script>
        document.domain = 'zf1.cn'
        function load() {
            console.log(frame.contentWindow.a);
        }
    </script>
</body>

// b.html
<body>
    hello，b
    <script>
        document.domain = 'zf1.cn'
        var a = 100;
    </script>
</body>

四、总结

• CORS支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案
• JSONP只支持GET请求，JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据
• 不管是Node中间件代理还是nginx反向代理，主要是通过同源策略对服务器不加限制
• 日常工作中，用的比较多的跨域方案是CORS和nginx反向代理

参考文献：
《九种跨域方式实现原理》浪里行舟 https://mp.weixin.qq.com/s/LV...
《ajax跨域，这应该是最全的解决方案了》撒网要见鱼 https://segmentfault.com/a/11...
《Ajax与JSON的一些总结》JKhuang http://www.cnblogs.com/rush/a...
《跨域资源共享CORS详解》阮一峰 http://www.ruanyifeng.com/blo...
《Ajax》http://javascript.ruanyifeng....
《postMessage》官方文档 https://developer.mozilla.org...