1、同源策略：其是浏览器中很重要的一种安全策略，所谓同源：协议、域名、端口号相同，浏览器端才能成功获取到服务器端资源，不同源的客户端脚本(javaScript/ActionScript)在没明确授权的情况下，不能读写对方的资源；【同源策略的核心：并非当发送请求的时候，浏览器查看URL与服务器端是否遵守同源来判断，而是当你发送请求到服务器端，请求到资源后返回客户端的时候，浏览器开始判断，若是不符合同源策略，其就会报错】
(1).Ajax受浏览器同源策略的限制，所以网络02中测试Ajax，用http://localhost/index.html;访问 http://localhost/getNews.php;
(2).http://www.example.com/page.html; http://example.com/page.html; 这两个并不一定是同一地址，服务器端并不一定配置了别名,所以访问服务器资源的过程中，不一定能互相访问；www.baidu.com的别名是baidu.com，两个都可以成功访问服务器端资源；
2、跨域访问解决方案：[除了Flash，其他都很常用]
(1).Flash：其是一种插件，目前几乎没人再使用了；
(2).服务器代理中转：设置服务器代理成功跨域，浏览器访问服务器有同源策略限制，但服务器之间可以直接传输数据，没有同源策略，http://localhost/index.html 想访问http://www.baidu.com，可做服务器代理http://localhost/, 客户端直接访问即可；
服务器端localhost先向www.baidu.com获取数据后，客户端再访问localhost即可
(3).jsonp跨域：jsonp最初是jQuery提出的跨域方案，慢慢才在原生中使用，巧妙利用了script标签的src属性,img的src属性也是如此，但iframe框架即使有src属性也遵循同源策略，跨域有其他方式；
(4).document.domain：其针对基础域名相同的情况，document.domain = baidu.com;//设置基础域名相同即可; 其下的子域名可以进行跨域访问，zhidao.baidu.com; wenku.baidu.com等可互相访问；应用场景：例如两个网址都是未登录状态，登录百度文库后，再进入百度的其他网页，该网页也是登录状态，底层还涉及cookie的知识；
(5).CORS(跨域资源共享)：access-control-allow-origin:允许特定域名访问，后台响应头中设置，access-control-allow-origin: *;//表示允许所有域名访问(白名单);//侧面证明同源策略的核心是当客户端请求到数据返回客户端的时候，浏览器会进行判断，若是不符合同源，其会报错； 【当使用XMLHttpRequest发送请求时，浏览器如果发现违反了同源策略就会自动加上一个请求头:origin,后端在接受到请求后确定响应后会在Response Headers中加入一个属性:Access-Control-Allow-Origin,值就是发起请求的源地址，浏览器得到响应会进行判断Access-Control-Allow-Origin的值是否和当前的地址相同，只有匹配成功后才进行响应处理。现代浏览器中和移动端都支持cors，IE8以上】
(6).iframe框架：子窗口拿父级元素：location.hash; 父窗口拿子级元素：window.name; H5中的postMessage;以及websocket配合iframe跨域操作
3、jsonp跨域：浏览器的同源策略中<script>元素是个例外，其通过src属性可以动态引入json数据却不受同源策略的影响，其是JSON的一种"使用模式"[ json with padding: json外加了包裹层 ]
(1).可理解为src属性不受同源策略限制，之前使用img图片的时候src直接引入网络上图片的地址便可使用，以及script引入各种库文件，按道理说都是不同源的，但依旧可获取资源，底层原理便是src
(2).jsonp的应用场景多为制作搜索框，jsonp不仅可以做GET请求，也可以做POST请求，同ajax类似，只不过它们更聚焦到GET请求
(3).使用jsonp的过程中：动态创建script标签，引入资源，用完销毁最佳~ (聚焦点：引入数据);
(4).封装jsonp;(demo:百度搜索框~)
4、iframe框架：在当前页面嵌入另一个网页，嵌入的网页有独立的document文档结构；
(1).应用场景：广告页面(不用更改本页面结构)，在线编辑器，导航栏tab切换(首尾部相同，只改变中间页面，引入不同的iframe框架即可，较古老的做法)，以及一些登录注册页面(大公司都使用最新的单页面应用[用户体验感好]，小公司还在使用);[目前QQ邮箱登录注册框也不再使用iframe]
(2).iframe框架的缺点：window.onload事件在整个文档页面全部加载完成后执行，过多嵌入iframe框架会阻塞页面加载 ->解决方案：动态加载iframe框架
(3).<iframe src=""></iframe>;//iframe框架即使有src属性，其也是严格遵循同源策略，同源下才能互相访问变量，方法等；(测试过程中必须在wampserver/www文件夹下，如果直接打开，其是file协议，本地协议又没有域名，端口号，所以没法谈同源策略，同源策略是发送网络请求过程中)
- - - >>> 同源策略下父子窗口元素互相访问：使用window.parent;/ ifr.contentWidow
- - - >>>(非同源)跨域父子窗口元素访问：子窗口访问父窗口元素：location.hash; 父窗口访问子窗口元素：window.name;
[1].父窗口
[2].子窗口
H5中的新方法：postMessage; websocket;//websocket:(其也是一种协议类似http,解决http不能让服务器主动发出数据的问题，其也是TCP、ip协议建立连接，但建立连接后不会断开，每当服务器数据有变化的时候，其就发送个服务器端)
网友评论