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

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

一、JSONP(JSON with Padding)

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

1、工作原理

我们先来看一个例子：使用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被解析时，回调便会自动执行。这需要加载