跨域

[homobulla]

什么是跨域
浏览器的同源策略会导致跨域，这里同源策略又分为两种：

1. DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。
2. XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

（第二种则是我们常见的协议、域名、端口 同源策略

为什么要有跨域
同源策略是为了安全，CSRF攻击正是利用了这一点。

JSONP

我们经常会说，用jsonp可以跨域请求，本质上是利用了script标签的src属性，Web 页面上调用 js 文件不受浏览器同源策略的影响，所以通过 Script 便签可以进行跨域的请求。

<script type="text/javascript">
 function handleResponse(response){
   console.log(response);
 }
 var oBtn = document.getElementById('btn');
 oBtn.onclick = function() { 
  var script = document.createElement("script");
  script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
  document.body.insertBefore(script, document.body.firstChild); 

};
</script>

从上面代码我们可以看出为什么jsonp只支持get方式的请求了。

CORS
CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。
原理是利用服务器没有跨域一说，通过在服务器设置权限从而让浏览器可以访问。大致过程是：

• 在客户端设置xhr属性withCredentials为true （带cookie）
• 在服务端需要在 response header中设置字段:
  Access-Control-Allow-Origin: 这里是请求的域名
Access-Control-Allow-Credentials:true

postMessage
这是H5的一个新api,类似于vue父子组件的传值，都是通过一个事件函数发送数据，然后在目标页面监听这个事件。