跨域中CORS和JSONP原理

跨域关键知识

同源策略
浏览器故意设计的一个限制功能
CORS
突破浏览器限制的一个方法
JSONP
IE时代的妥协

同源策略

什么是同源？
源：协议 + 域名 + 端口号
如果两个url的协议，域名和端口号完全相同，那么这两个url就是同源。
http://www.baidu.com和http://baidu.com是不同源的，因为他们不完全相同

同源策略定义
如果JS运行在源A中，那么JS就只能获取A中的数据，不能获取源B的数据。
就算JS是从源B下载的，运行在A中，也不能读取源B的数据。

简单来说，同源策略就是：不同源的页面之间，不允许相互访问数据

为什么要这样设计

为了保护用户的隐私

假如没有同源策略
无法区分发送者
这里如果页面A要访问页面B（不同源），那么A会发送请求，这个请求（如果是黑客）几乎和正常的请求没有区别（只有请求的referer有区别），如果后台不检查这个referer，那就是和正常的没有区别。

那检查referer不就好了？

万一呢，万一没检查到，整个网页不就有危险了吗？安全链条的安全性取决于最弱的一环。所以万一忘记检查了，就有大问题。

怎么跨域

CORS

要共享数据，就要提前声明，A要访问B的数据，只需在A的响应头中写入B可以访问即可，具体语法查MDN就好。
没错就是这么简单。

JSONP

IE不支持CORS
那么JSONP就出现了。
JSONP的原理就是：A能引用B的JS，但是不能访问数据。那么我们就把数据写到JS对象中，A再去引用JS，这是就能成功获取到数据了。
步骤

• B把数据写入一个JS文件中
• A引用JS文件
• JS文件执行事先定义好的window.XXX函数
• A执行window.XXX函数

这时就能成功读取到数据了。

代码部分就不展示了，原理就是这么简单。