1. 早期主要使用JSONP的方式，jsonp的原理很简单，就是动态的创造script标签，然后利用script的src属性不受同源策略约束来跨域获取数据
<script type="text/javascript">
function handleResponse(response){
console.log(response);
}
</script>
<script type="text/javascript">
window.onload = function() {
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>
它的问题时，只能使用Get请求。且前后端配合使用， 不够灵活。
2. CORS 现在主要的跨域方法，支持所有请求方式。
它分简单请求和非简单请求。
简单请求
针对那些 head，get， post，且只支持部分简单http请求头和部分值。 如accept, accept-language, content-language, content-type = application/form or formData or text/plain;
简单请求发送时，浏览器会自动加一个Origin头，serve端返回的响应报文里，浏览器自动识别是否有这个头，如果没有access-control-allow-origin 这个头，没有则报onerror错误。此时返回的状态码还是200.
同时， 还有access-control-allow-credentials， 如果有这个头，则告诉浏览器可以发送cookie，但此时后端设置的响应头 acess-control-allow-origin 不可以为 *。
access-control-expose-header，告诉浏览器，允许的自定义头字段。
非简单请求
除了简单请求外，都会走非简单请求流程。
它会预先发一个预检请求去询问server，问这个origin是否在server的白名单里。
这个预检请求会包含几个额外的头，origin， access-control-request-method（put，delete），access-control-request-headers（额外的一些头，eg：x-customer-header）
then
server端需要做判断，返回response，告诉浏览器是否可以跨域，浏览器时通过几个响应头来判断的。
access-control-allow-origin：*， xxx白名单
access-control-allow-methods： server端允许的请求方法
access-control-allow-credentials： server端是否允许发cookie
access-control-max-age：172800（s），这个值浏览器会缓存起来，过期后在额外发这个预检请求。