关于跨域的一点研究

跨域是什么

• 跨域，指的是当一个资源向另一个与该资源本身所在服务器不同域或端口的服务器请求一个资源时，资源会发起一个跨域HTTP 请求。例如：站点 http://a.com中的某个图片的 src 地址为 http://b.com 时，就是发起了一次跨域http请求。
• 出于安全考虑，浏览器会对ajax的跨域请求进行限制，其具体表现为浏览器会拦截跨域请求返回的内容。而其他的标签如 script、link、img 等发送的跨域请求则会正常返回内容。

同源策略是什么

• 同源策略，指的是一种限制一个源的资源与来自另一个源的资源进行交互的策略，这是一个用于隔离潜在恶意文件的关键的安全机制。
• 这个策略具体指的是要在同协议、同域名、同端口的前提下，才能够进行资源请求
• 遵守这个策略的有 XMLHttpRequest 和 Fetch

有哪些跨域的解决方法

• JSONP。JSONP的原理是利用 script 标签不受同源策略的限制，这种做法需要前端和后端的配合。例子如下：

// btn为某个按钮
btn.addEventListener('click', function () {
  var script = document.creatElement('div');
  script.src = 'www.xxx.com?callback=' + handle;
  document.head.appendChild(script);
  document.head.removeChild(script);
});

// handle为自定义的函数
function handle(data){}

在上面的例子中，先创造一个 script 标签，然后把 src 赋值为后端的地址再加上 ?callback=handle，其中 handle 为自定义的函数的名字，再利用 script 标签向目标发送跨域请求。目标接收到请求后，解析里面的 callback 参数，然后返回函数包含数据的格式，例如 res.send(callback+'('+JSON.stringify(data)+')') // data为要返回的数据。等到脚本加载完毕后，handle 函数就会自动执行，从而能够处理跨域请求的数据

• CORS。跨域资源共享（CORS）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。使用该机制的是 XMLHttpRequest 和 Fetch，突破了ajax同源策略的限制。使用这个机制也需要后端的配合。例子如下：

btn.addEventListener('click', function () {
 var xhr = new XMLHttpRequest();
 xhr.onreadystatechange = handle;
 xhr.open('get', 'www.xxxx.com?aaa=1', true);
 xhr.send();
});

上面的例子与普通ajax的请求代码没什么不同，然而这样通过ajax发起跨域请求所返回的数据则会被浏览器拦截。这个时候需要让后端返回数据之前要设置一个返回头，如 res.setHeader('Access-Control-Allow-Origin', '*') // 第二个参数为允许访问的域名，*表示允许所有域名。当浏览器读取到数据的返回头时，如果返回头的 Access-Control-Allow-Origin 字段后面的域名和发起请求的域名一样，那么浏览器就不会拦截返回的数据。通过这种后端限制域名的方式，可以使跨域数据传输更安全

• 降域。对于主域相同而子域不相同的情况，可以使用降域的操作。例如有 http://a.ccc.com 和 http://b.ccc.com 两个网站，而且在 http://a.ccc.com 上通过 iframe 引入 http://b.ccc.com，这时候如果想在a网站的脚本上操控b网站上的元素（跨域操作），那么可以给两个网站的脚本都设置 document.domain = 'ccc.com' // domain的值为主域名，这样a网站就可以跨域操控b网站上的元素了

• postMessage。HTML5增加了postMessage方法，用于跨域传输信息。例如 http://www.a.com 向 iframe 里的 http://www.b.com 发送消息：

// http://www.a.com
<iframe src="http://www.b.com" frameborder="0"></iframe>
<script>
  window.iframes[0].onload = function () {
    window.iframes[0].postMessage('hello', '*'); // 第二个参数为目标的URI地址，如果窗口地址与第二个参数的URI不匹配，则不会发送消息
  }
</script>

// http://www.b.com
window.addEventListener('message', function (e) {
  console.log(e.data);
});