解决跨域的两种方案JSONP和CORS

讲跨域以前，咱们先来说同源策略（SOP），同源策略是网景公司提出的一个著名安全策略。所谓同源就是域名、协议、端口相同。例如www.12306.cn中，http就是超文本传输协议，12306就是域名，cn就是端口。若是两个资源须要通讯，那么他必须知足SOP。而在前端中咱们使用ajax进行数据请求。
若是资源不一样域，那么咱们在使用ajax请求数据的时候，就会报错，表示拒绝访问。那如何进行跨域处理呢？事实上有三种方法一、JSONP，二、子域代理，三、CORS。因为第二种方法现在已经采用的很是少，因此咱们在这儿不作讲解

1、JSONP(JSON with Padding)

带填充的JSON,是一种能够在JS中绕过同源策略，并发起跨域HTTP请求的使用模式，能够启动JS的跨域HTTP请求
同源策略有一个显著的例外，HTML脚本元素是能够规避SOP检查的。那就意味着咱们能够采用动态注入脚本的方式向其余源发出HTTP请求。JSONP正是利用了这个例外状况进行跨域数据加载的。

一、工做原理

咱们先来看一个例子：使用ajax请求一个普通的JSON文件。假设你使用ajax请求'jsonpjs.com/info.json&#…

{
    'title': 'jsonp explaintation',
    'author': 'Cornelius'
}复制代码

浏览器接受到这个json文件后，就会把他当成字符串进行处理，可是这个字符串咱们须要把它转换为对象，才可以被javascript所使用，这里咱们就可使用json.parse函数来完成。固然因为同源策略的限制，ajax只可以在同一个域中才可以使用。可是正如咱们前面提到的，script是html脚本元素它能够规避SOP的检查因此咱们为了请求到json文件，咱们可使用这种方式

经过script元素请求资源，当文件加载完成时，浏览器会把json响应看成Javascript解析。可是这样的状况下咱们仍是没法得到json数据。
因为该对象没有被存储，也没有赋值给一个变量，或者做为参数传递给一个函数，浏览器就会忽略它。
那么该如何获取JSON输出呢?
这儿有两种方法，第一种直接由服务器把json数据进行存储。例若有一个外部URL，jsonjs.com//info.js(注意…
var jsonResponse = {
'title': 'jsonp explaintation',
'author': 'Cornelius'
}

当文件加载完成后，咱们就能够经过全局变量jsonResponse访问这个JSON对象了。当该变量包含所请求数据时，咱们可使用script.onload来通知代码。那么另一种经过一个回调函数代替全局变量的方式来传递JSON对象

jsonHandler({
    'title': 'jsonp explaintation',
    'author': 'Cornelius'
})复制代码

使用这种方式的好处在于，咱们不须要依靠script元素的onload事件来判断json是否可用，当info.js被解析时，回调便会自动执行。这须要加载