同源策略、跨域、jsonp

1.什么是同源策略

同源是指同协议、同域名、同端口号，可以通过location.origin来查看一个完整的源，同源策略的目的是为了保证用户信息的安全，防止恶意的网站窃取数据。不同源有以下三种行为受到限制：

Cookie、LocalStorage 和 IndexDB 无法读取。
DOM 无法获得。
AJAX 请求不能发送。

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

跨域指的是从一个域名的网页去请求另一个域名的资源
实现跨域的形式：
（1）降域
（2）JSONP
（3）CORS

兼容性

（4）HTML5中的PostMessage方法
（5）通过hash方法
（6）通过window.name的方法

3.jsonp 的原理是什么

就是利用<script>标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，形如： <script src="http://www.example.net/api?param1=1&param2=2"></script> ，并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如： callback({"name":"hax","gender":"Male"}) 这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

4.CORS是什么

CORS是一个W3C标准，即Cross-origin resource sharing，全称是"跨域资源共享"。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制，但CORS需要浏览器和服务器同时支持。

5.本地搭建服务器，演示同源策略

找到hosts文件，修改hosts文件，在同一个IP下绑定a.xxk.com和b.xxk.com两个域名。

绑定域名
a.xxk.com/task31/task31.html下的内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    你好
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    <script>
      $.ajax({
        url:"//b.xxk.com/task31/task31.php",
        type:"get",
        dataType:"json",
        success:function(data){
          alert(data);
        },
        error:function(){
          alert("出错")
        }
      });
    </script>
  </body>
</html>

b.xxk.com/task31/task31.php下的内容：

<?php
$data="你好";
echo json_encode($data);
?>

演示结果

运行结果

6.至少使用一种方式解决跨域问题

使用CORS，在task31.php中添加：

header("Access-Control-Allow-Origin: http://a.xxk.com");

演示结果

使用JSONP
a.xxk.com/task31/task31.html的内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    你好
    <script>
      window.fn = function(data){
        alert(data);
      }
      var script = document.createElement('script');
      script.src = "http://b.xxk.com/task31/task31.php?callback=fn";
      document.body.appendChild(script);
    </script>
  </body>
</html>

b.xxk.com下的task31.php：

fn("nihao")