同源策略、跨域、jsonp

什么是同源策略

同源策略是浏览器的一个功能，就是协议、域名、端口号都相同。对于不同源的客户端脚本再一般情况下只能引用二不可以读写。

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

处于安全方面考虑，不允许跨域调用其他页面的对象。简单的理解就是因为JS同源策略的限制，a.com域名下的JS无法操作b.com域名下的对象资源。
跨域的形式：

1. 降域
2. JSONP
3. CORS
4. postMessage
5. 其他hack

降域是什么

在iframe形势下将两个不同源的URL变成同源状态
通过给当前页面和iframe页面同时加上document.domain=当前页面进行降域处理.
弊端：

1. 只能再iframe形式有用
2. 降域只能设置为父域名
3. 安全问题

jsonp 的原理是什么

jsonp可以看作是动态添加script。

1. 在html中声明一个方法，给目标路由发送一个callback=方法的参数
2. 返回路由中JS内容，再调用这个方法

弊端：

1. 只能在GET请求中使用
2. 可能被注入(callback=function(){})，要靠外界字符串过滤

    callback = callback.replace('/\(/g','')
    callback = callback.replace('/\)/g','')

3. 为了安全性，需要检验身份

CORS是什么

CORS是HTTP2的方法。它允许浏览器向跨域服务器发出XMLHttpRequest请求，从而客服AJAX只能同源使用的限制，简单来说就是在头信息之中增加一个Origin字段

演示

没有解决跨域问题：

跨域问题

JSONP解决:

  var script = document.createElement('script');
  window.xxx = function(data){//给XXX绑定一个函数方法
    alert(data)
  }
  script.src = '//b.com:3000/test/ajax.php?callback=xxx';//传一个callback=xxx的参数给后台
  document.body.appendChild(script)

JSONP

CORS解决：
对于简单请求来说，只要在后台文件中添加一句话就可以解决

CORS