JSONP_跨域

1： 什么是同源策略

同源策略（Same origin policy）是一种约定，是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

现在所有支持JavaScript 的浏览器都会使用这个策略。
所谓同源是指，域名，协议，端口相同。
当一个浏览器的两个tab页中分别打开来** 百度和谷歌**的页面
当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，
即检查是否同源，只有和百度同源的脚本才会被执行。
如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

2： 什么是跨域？跨域有几种实现形式

跨域：简单来说就是不同域名之间相互访问（<em>跨域并非浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但返回结果被浏览器拦截了</em>）
限制跨域是浏览器的行为，不是JS的行为
几种实现形式

• JSONP(JSON with Padding 填充式JSON 或参数式JSON)
• CORS(Cross-Origin Resource Sharing，跨源资源共享)
• HTML5的window.postMessage
  window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
  window.postMessage允许两个窗口/帧之间跨域发送数据消息。从本质上讲，window.postMessage是一个跨域的无服务器垫片的Ajax。
• 降域

3： JSONP 的原理是什么

在js中，我们虽然不能直接用XMLHttpRequest请求不同域上的数据，但是在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。例如：

<script type="text/javascript">
    function dosomething(jsondata){
        //处理获得的json数据
    }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。
JSONP实际上就是被包含在一个回调函数中的JSON。由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。
JSONP的优点是：

• 它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；
• 它的兼容性更好，在老版本的浏览器中可以运行，不需要XMLHttpRequest或ActiveX的支持；
• 它在请求完毕后可以通过调用callback的方式回传结果，方便调用。
  JSONP的缺点则是：
• 它只支持GET请求而不支持POST等其它类型的HTTP请求，不能提交大量数据；
• 它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

4： CORS是什么？

1.CORS（Cross-Origin Resource Sharing，跨源资源共享）是W3C 的一个工作草案，定义了在必须访问跨源资源时，浏览器与服务器应该如何沟通。CORS 背后的基本思想，就是使用自定义的HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。
2.实现此功能非常简单，只需由服务器发送一个响应标头即可。

浏览器支持情况：

• IE 8+
• Firefox 3.5+
• Opera 12+
• Safari 4+
• Chrome 3+

假设我们页面或者应用已在 http://www.a.com/ 上了，而我们打算从 http://www.b.com 请求提取数据。一般情况下，如果我们直接使用 AJAX 来请求将会失败，浏览器也会返回错误。利用 CORS，http://www.b.com 只需添加一个标头，就可以允许来自 http://www.a.com 的请求。下面是用php进行的设置：

//服务器需要声明这么一条响应头，即可轻松跨域
//PHP中的 header() 设置，“*”号表示允许任何域向我们的服务端提交请求：
header("Access-Control-Allow-Origin: *")
//也可以设置指定的域名，如域名 http://h5.jd.com ，那么就允许来自这个域名的请求：
header("Access-Control-Allow-Origin: http://example.com")

CORS和JSONP对比：
CORS与JSONP相比，更为先进、方便和可靠。
1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS）。

5： 根据视频里的讲解演示三种以上跨域的解决方式

josnp

function addScriptTag(src) {  
  var script = document.createElement('script');    
  script.src = src;  
  document.body.appendChild(script);  
}  
  
window.onload = function () {  
  addScriptTag('http://example.com/ip?callback=foo');  
}  
  
function foo(data) {  
  console.log('Your public IP address is: ' + data.ip);  
};  
//
foo({  
  "ip": "8.8.8.8"  
}); 

降域

//在页面 http://www.example.com/a.html 中设置document.domain:
<iframe src="example.com/b.html" id="iframe" onload="test()"></iframe>
    <script>
        document.domain='example.com';//设置成主域
        function test(){
            alert(document.getElementById('iframe').contentWindow);
        }
    </script>

//在页面 http://example.com/b.html中也设置document.domain
<script>
        document.domain='example.com';//在iframe载入的这个页面也设置 document.domain与主页面相同
</script>
//而且是必须的，虽然这个文档的domain就是example.com,但是还是必须显示的设置document.domain的值

跨域资源共享（CORS）

这种方式只要服务端把response的header头中设置Access-Control-Allow-Origin为制定可请求当前域名下数据的域名即可

//相关Ajax代码可能如下
var xhr = new XMLHttpRequest();    
xhr.open("GET", "'http://www.baidu.com'", true);   
//区别就在于相对路径换成了其他域的绝对路径，也就是你要跨域访问的接口地址。
xhr.send();    

//服务器端
res.header('Access-Control-Allow-Origin','*');//“*”号表示允许任何域向我们的服务端提交请求
res.header('Access-Control-Allow-Origin','http://www.baidu.com')//也可以设置指定的域名