前端跨域(CORS)解决方案

同源指的是：同协议，同域名，同端口

一. 为什要设计同源策略？
浏览器出于安全方面的考虑，不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

二.我们怎么从其他网站获取数据？
1. 服务器处理:
流程：
1.浏览器发现这次请求不符合同源策略，就自动在头信息之中，添加一个Origin字段。

GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

2.该请求到达服务器后，服务器会根据这个值来判断是否接受请求。如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段(如下所示)。如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

3.浏览器收到响应后判断该相应头中是否包含Origin的值，如果响应的头信息没有包含Access-Control-Allow-Origin字段，就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获，这时我们无法拿到响应数据。如果有则浏览器会处理响应，我们就可以拿到响应数

整个CORS通信过程，都是浏览器自动完成，不需要用户参与

2.JsonP:
原理：Script标签获取数据不受同源策略限制

function addScriptTag(src){
    var script = document.createElement('script');
    script.src = src; //跨域网址
    document.body.appendChild(script);  
    // 往页面插入元素后，会向跨域网址发出请求(src指定了跨域网址，得到响应后立即执行
}

window.onload = function(){
    addScriptTag("http://example.com/ip?callback = foo');  //当页面加载完毕，即往页面中插入script元素
}

function foo(data){
    console.log('your public ip address is: '+ data.ip)'
}

上述代码中，设置callback 为foo方法，最后会回调foo，得到数据

注意：JSONP只能发 GET 请求(因为请求是放在