简单理解JSONP

什么是同源策略?

浏览器出于安全方面的考虑，只允许与本域下的接口交互。
不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

什么是本域

• 同协议：如都是 http 或者 https
• 同域名：如都是 http://jirengu.com/api 和 http://jirengu.com/news
• 同端口：如都是 80 或者 8080 端口

什么是同源

• http://jirengu.com/xxx/b.js 和http://jirengu.com/index.php

同源的目的是为了保证用户信息的安全，防止恶意的网站窃取数据

什么是不同源

• 协议不同：http://jirengu.com/ 和 https://jirengu.com/
• 域名不同：http://bbs.jirengu.com/ 和 http://js.jirengu.com/
• 端口不同：http://jirengu.com/main.js 和 http://jirengu.com:8080/file.php

对于当前页面 JS 引入文件来说，引入的文件域不重要，重要的是加载该 JS 页面所在什么域
例：
页面 http://jirengu.com/a.html 引入 http://jirengu.com/index.js 加载域是当前域名下的index.js 文件，如果引入 https://pay.alipay.com/pay.js 不同域也不同源

什么是跨域？

接口请求由其它域名或端口提供时，会发起跨域。

跨域有几种实现形式？

• JSONP
• CORS
• 降域
• postMessage

JSONP 的原理是什么

• 定义回调函数 ret()
• 在创建script 的 src 地址执行后添加参数?callback=red , 等同于 <script src="http://jirengu.com/index.js?callback=ret"></script>
• 服务端在收到请求后返回数据，输出 ret(data) 字符串
• ret(data) 此时会调用回调函数，把返回的 data 做为参数处理

CORS是什么

CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。
服务端设置 "Access-Control-Allow-Origin", "*");，则浏览器会处理响应，就可以拿到响应数据，否则无法拿到

四种跨域的解决方式

jsonp

https://boloog.github.io/demos/Cross-domain/mp4/jsonp.mp4

cors

https://boloog.github.io/demos/Cross-domain/mp4/cors.mp4

domain

https://boloog.github.io/demos/Cross-domain/mp4/domain.mp4

postMessage

https://boloog.github.io/demos/Cross-domain/mp4/postMessage.mp4