跨域，了解一下

跨域的理解

跨域，顾名思义，即为请求了不一样域的资源。
了解跨域这件事，咱们先看看致使会存在跨域问题的根源：浏览器的同源策略
浏览器的同源策略又是什么鬼？ 好像了解一点，可是又说不清楚。此次咱们就来详细探索一下。

声明一下，本文是参考众多其余有关跨域文章结合本身技术认识所作的记录，请与
浏览器同源政策及其规避方法参考着看更加合适。

同源策略：(the same-origin policy)

MDN
维基百科：
In computing, the same-origin policy is an important concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, host name, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model.
简单翻译一下：
在web应用安全模型中，同源策略是一个重要的概念。在该策略下，仅俩个页面有相同的源, web浏览器才容许包含在第一个页面中的脚本访问第二个web页面的数据。源被定义为 URI协议，主机名，端口号的组合。该策略阻止了一个页面的恶意脚本经过文档对象模型(DOM)得到其余的web页面的敏感数据.
那为何会有同源策略呢，能够参考一下，CSRF这篇文章谈到CSRF这种状况。
那哪些数据会被限制呢？
敏感数据通常指的是浏览器中的Cookies, SessionStorage, LocalStorage, IndexedDB数据, CacheStorage, ApplicationCache...；

同源策略限制范围

阮一峰老师还对同源策略对于非同源，限制的行为作了概括：

“
若是非同源，共有三种行为受到限制。
（1） Cookie、LocalStorage 和 IndexDB 没法读取。
（2） DOM 没法得到。
（3） AJAX 请求不能发送。
 虽然这些限制是必要的，可是有时很不方便，合理的用途也受到影响。下面，我将详细介绍，如何规避上面三种限制。
”

如下对阮老师总结的方法进行测试

Cookies

浏览器容许经过设置document.domain共享 Cookie。
document.domain的写操做是有要求的。只能写入基础域名和当前域名，其余域名是没法写入的，因此domain这种方式只能在亲子域名之间共享cookies
// 因为尚未相关资源（三级域名资源，域名资源），没有作验证

iframe

页面1 localhost:8080的页面，包含一个页面2 (iframe = http://localhost:8081);
页面2中访问window.parent.document报跨源错误
在页面2中window.parent能够访问,可是在iframe中访问获取到的window.parent对象中属性缺乏了有关DOM的部分，而直接在页面1中查看window对象，能够看到document属性对象，而使用夸源window.parent没法获取document属性对象

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

片断识别符 fragment identifier

因此这种方式，不管是否夸源，父窗口能够经过更改子窗口的iframe的src中的hash值来传递数据给子窗口;
可是 在存在跨源的状况下，子窗口获取parent.location.href(可写不可读)读操做会报跨源错误，因此子窗口课件写入url的方式传递数据给父窗口。
片断识别符方式能够父传子，子传父。

window.name

document.getElementById('iframe').contentWindow.name
访问出错，因此没法跨域

window.postMessage

页面1 调用iframe的iframe.contentWindow.postMessage(data,"http://localhost:8081")
页面2 调用window的 window.parent.postMessage(data,'http://localhost:8080')

AJAX (最多见到的状况)

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

JSONP
WebSocket
CORS
”

JSONP

// 客户端（浏览器页面）
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);
};


//服务端
foo({
  "ip": "8.8.8.8"
});

CORS

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