跨域 -JSONP

1、什么是同源策略？

同源策略(Same origin Policy)
浏览器出于安全方面的考虑，只允许与同域下的接口交互。
所谓“同源策略”，即不同源的客户端脚本在没有明确授权情况下，不允许读写对方的资源。

同域指的是？
同协议：如都是http或者https
同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
同端口：如都是80端口

如：
http://jirengu.com/a/b.js 和 http://jirengu.com/index.php (同源)
不同源的例子：
http://jirengu.com/main.js 和 https://jirengu.com/a.php (协议不同)
http://jirengu.com/main.js 和 http://bbs.jirengu.com/a.php (域名不同，域名必须完全相同才可以)
http://jiengu.com/main.js 和 http://jirengu.com:8080/a.php (端口不同,第一个是80)
需要注意的是: 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域

2、什么是跨域？跨域有几种实现形式？

而所谓的跨域，指的是突破同源策略的限制，本源的客户端脚本访问其他源的数据。

跨域的实现方式
目前，实现跨域访问的方法包括：
- JSONP
- Cross-Origin Resource Sharing
- HTML5 postMessage
- 其他Hack
    - 利用hash
     -  利用window.name

这里主要讲解常用的JSONP和CORS两种跨域方法。

3、JSONP 的原理是什么？

JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。
它的基本思想是:
1.网页通过添加一个

b.ji.com代码

报错了？

QQ图片20170119202243.png

解决办法
1.CORS
在http://b.ji.com/2.php中添加
header("Access-Control-Allow-Origin: http://a.ji.com");

QQ图片20170119202731.png

GitHub代码
2.Jsonp
网页通过添加一个

GitHub代码

1.png

3.postMessage

3.png

GitHub代码