JS跨域解决方案

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），这个值浏览器会缓存起来，过期后在额外发这个预检请求。