面试题：什么是JSONP?什么是CORS?什么是跨域？

1.浏览器出于安全考虑，设置了同源策略。如果两个url的协议、域名、端口号完全一致，那么他们两个就是同源。如果不同源就是跨域。我们通常使用CORS或JSONP解决跨域。

2.CORS(跨域资源共享Cross-origin resource sharing)：它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。在服务端设置Access-Control-Allow-Origin添加想要进行跨域的url(修改响应头)，就可以开启CORS。

3.JSONP（非正式的跨域数据交换协议）：当浏览器不支持CORS时，使用JSONP。JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行。提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP 需要对应接口的后端的配合才能实现。

优点：

1. 兼容IE； 缺点：

• 由于是script标签，所以无法知道状态码是什么，只知道成功和失败。
• 只能发送get请求，不支持post.

function jsonp(setting){
  setting.data = setting.data || {}
  setting.key = setting.key||'callback'
  setting.callback = setting.callback||function(){} 
  setting.data[setting.key] = '__onGetData__'

  window.__onGetData__ = function(data){
    setting.callback (data);
  }

  var script = document.createElement('script')
  var query = []
  for(var key in setting.data){
    query.push( key + '='+ encodeURIComponent(setting.data[key]) )
  }
  script.src = setting.url + '?' + query.join('&')
  document.head.appendChild(script)
  document.head.removeChild(script)

}

jsonp({
  url: 'http://api.jirengu.com/weather.php',
  callback: function(ret){
    console.log(ret)
  }
})
jsonp({
  url: 'http://photo.sina.cn/aj/index',
  key: 'jsoncallback',
  data: {
    page: 1,
    cate: 'recommend'
  },
  callback: function(ret){
    console.log(ret)
  }
})