前端跨域

前端跨域 是一作为每个前端er都可能会涉及到的技术，之前也只是面试的时候背背各种解决方案，工作一开始就遇到了这样的问题，说明其重要性。那就参考各种方案来详细梳理一下，方便日后自己回顾。

---

一、什么是跨域

受浏览器同源策略的影响，域内的js不能操作其他域中的DOM，但是有时候我们又需要通过ajax去请求不同域内的数据，这时就需要跨域请求的方案了。

浏览器同源策略

 协议相同 域名相同 端口号相同

举例来说，http://www.a.com/index.html ，协议是http://，域名是www.a.com，端口号是80（默认端口省略）。下面给出几个地址，分别来看看是否同源

举例说明 是否同源 http://www.a.com/about.html 同源（只是不同文件而已，不同文件夹下的也是可以的） http://www.a.com:8000/index.html 不同源（端口号不同） https://www.a.com/index.html 不同源（协议不同） http://www.b.com/index.html 不同源（域名不同，a和b） http://192.168.1.84/index.html 不同源（域名和域名对应ip） http://script.a.com/index.html 不同源（主域相同，子域不同） http://a.com/index.html 不同源（同一域名，不同二级域名)

浏览器同源策略目的

保证用户信息的安全，防止恶意的网址盗取数据。
如果你登录了A网站，信息被存储在Cookie中，那么其他网站可以读取A网站的Cookie，那么你的信息就泄露了。Cookie一般用来保存用户的登录状态，那么其他网站就可以冒充登录，这样就毫无安全了。

浏览器同源策略限制的范围

（1） Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。

二、解决方案

Cookie

Cookie是我们常用的一种存储方式，同源网页共享，比如登录之后跳转到其他页面，就不需要再登录了。但是，两个网页一级域名相同，二级域名不同可以通过
document.domain ，两个页面就可以共享Cookie。例如http://www.a.com/a.html 和 http://w.a.com/b.html

    document.domain = 'a.com';

a网页通过js设置了一个Cookie

    document.cookie = 'hello world';

b网页可以读取这个Cookie

    var cookieFromA = document.cookie;

这种方法适用于Cookie和iframe窗口，LocalStorage 和 IndexDB 无法通过这种方法，规避同源政策，而要使用下文介绍的PostMessage API。

另外，服务器也可以在设置Cookie的时候，指定Cookie的所属域名为一级域名，比如.a.com。

Set-Cookie: key=value; domain=.example.com; path=/

这样，二级域名和三级域名不用做任何设置，都可以读取这个Cookie。

iframe

如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。
比如，父窗口运行下面的命令，如果iframe窗口不是同源，就会报错。

document.getElementById("myIFrame").contentWindow.document// Uncaught DOMException: Blocked a frame from accessing a cross-origin frame.

上面命令中，父窗口想获取子窗口的DOM，因为跨源导致报错。
反之亦然，子窗口获取主窗口的DOM也会报错。

window.parent.document.body// 报错

如果两个窗口一级域名相同，只是二级域名不同，那么设置上一节介绍的document.domain属性，就可以规避同源政策，拿到DOM。

对于完全不同源的网站，目前有三种方法，可以解决跨域窗口的通信问题。

• 片段识别符（fragment identifier）
• window.name
• 跨文档通信API（Cross-document messaging）

片段识别符

父窗口可以通过url传值给子窗口

var src = baseUrl + '#' + datadocument.getElementById('iframe').src = src

子窗口通过监听hashchange事件得到通知

window.onhashchange = checkMessage;function checkMessage() {  var message = window.location.hash;}

子窗口也可以改变父窗口的片段标识符。

parent.location.href= target + "#" + hash;

window.name

浏览器窗口有window.name属性。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。

父窗口先打开一个子窗口，载入一个不同源的网页，该网页将信息写入window.name属性。

window.name = data;

接着，子窗口跳回一个与主窗口同域的网址。

location = 'http://parent.url.com/xxx.html';

然后，主窗口就可以读取子窗口的window.name了。

var data = document.getElementById('myFrame').contentWindow.name;

这种方法的优点是，window.name容量很大，可以放置非常长的字符串；缺点是必须监听子窗口window.name属性的变化，影响网页性能。

window.postMessage

window.postMessage 是HTML5的API（Cross-document messaging）
API 为window对象新增了window.postMessage 方法，允许跨窗口通信，不论是否同源

var popup = window.open('http://b.com', 'title');popup.postMessage('Hello World!', 'http://a.com');// a向b传值

通过message 事件监听消息

window.addEventListener('message', function(e) {  console.log(e.data);},false);

message 事件的事件对象有以下三个属性
- event.source：发送消息的窗口
- event.origin: 消息发向的网址
- event.data: 消息内容

以下子窗口通过event.source 属性向父窗口发送消息

window.addEventListener('message', giveBackMessage);function giveBackMessage(event) {  event.source.postMessage('Nice to see you!', '*');}

event.origin属性可以过滤不是发给本窗口的消息。

window.addEventListener('message', receiveMessage);function receiveMessage(event) {  if (event.origin !== 'http://aaa.com') return;  if (event.data === 'Hello World') {      event.source.postMessage('Hello', event.origin);  } else {    console.log(event.data);  }}

LocalStorage

通过window.postMessage，读写其他窗口的 LocalStorage 也成为了可能。
下面是一个例子，主窗口写入iframe子窗口的localStorage。

window.onmessage = function(e) {  if (e.origin !== 'http://bbb.com') {    return;  }  var payload = JSON.parse(e.data);  localStorage.setItem(payload.key, JSON.stringify(payload.data));};

上面代码中，子窗口将父窗口发来的消息，写入自己的LocalStorage。
父窗口发送消息的代码如下。

var win = document.getElementsByTagName('iframe')[0].contentWindow;var obj = { name: 'Jack' };win.postMessage(JSON.stringify({key: 'storage', data: obj}), 'http://bbb.com');

加强版的子窗口接收消息的代码如下。

window.onmessage = function(e) {  if (e.origin !== 'http://bbb.com') return;  var payload = JSON.parse(e.data);  switch (payload.method) {    case 'set':      localStorage.setItem(payload.key, JSON.stringify(payload.data));      break;    case 'get':      var parent = window.parent;      var data = localStorage.getItem(payload.key);      parent.postMessage(data, 'http://aaa.com');      break;    case 'remove':      localStorage.removeItem(payload.key);      break;  }};

加强版的父窗口发送消息代码如下。

var win = document.getElementsByTagName('iframe')[0].contentWindow;var obj = { name: 'Jack' };// 存入对象win.postMessage(JSON.stringify({key: 'storage', method: 'set', data: obj}), 'http://bbb.com');// 读取对象win.postMessage(JSON.stringify({key: 'storage', method: "get"}), "*");window.onmessage = function(e) {  if (e.origin != 'http://aaa.com') return;  // "Jack"  console.log(JSON.parse(e.data).name);};

三、AJAX

同源政策规定，AJAX请求只能发给同源的网址，否则就报错。
除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制。
- JSONP
- WebSocket
- CORS

JSONP

JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。但是缺点是只适用于get方法它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
首先，网页动态插入<script>元素，由它向跨源网址发出请求。

function addScriptTag(src) {  var script = document.createElement('script');  script.setAttribute("type","text/javascript");  script.src = src;  document.body.appendChild(script);}window.onload = function () {  addScriptTag('http://example.com/ip?callback=foo');}function foo(data) {  console.log('Your public IP address is: ' + data.ip);};

上面代码通过动态添加<script>元素，向服务器example.com发出请求。注意，该请求的查询字符串有一个callback参数，用来指定回调函数的名字，这对于JSONP是必需的。
服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。

foo({  "ip": "8.8.8.8"});

由于<script>元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。

WebSocket

WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。下面是一个例子，浏览器发出的WebSocket请求的头信息
—–摘自维基百科

GET /chat HTTP/1.1Host: server.example.comUpgrade: websocketConnection: UpgradeSec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==Sec-WebSocket-Protocol: chat, superchatSec-WebSocket-Version: 13Origin: http://example.com

上面代码中，有一个字段是Origin，表示该请求的请求源（origin），即发自哪个域名。
正是因为有了Origin这个字段，所以WebSocket才没有实行同源政策。因为服务器可以根据这个字段，判断是否许可本次通信。如果该域名在白名单内，服务器就会做出如下回应。

HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=Sec-WebSocket-Protocol: chat

CORS

CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。