跨域

题目1： 什么是同源策略

同源策略(Same origin Policy)：浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本（如：JavaScript）在没有明确授权的情况下，不能读写对方的资源。
本域指的是？
同协议：如都是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： 什么是跨域？跨域有几种实现形式?

跨域是指突破同源策略的限制，访问不同域下的数据，如

网络协议不同，如http协议访问https协议。
端口不同，如80端口访问8080端口。
域名不同，如qianduanblog.com访问baidu.com。
子域名不同，如abc.qianduanblog.com访问def.qianduanblog.com。

实现方式：

• JSONP
• CORS
• 降域
• postMessage

题目3： JSONP 的原理是什么?

html中script标签可以引入其他域下的js，比如引入线上的jquery库。利用这个特性，可实现跨域访问接口。需要后端支持

echo $cb . '&&' . $cb . '(' . json_encode($ret) . ')';

定义数据处理函数_fun
创建script标签，src的地址执行后端接口，最后用&加个参数callback=_fun
服务端在收到请求后，解析参数，计算返还数据，输出 fun(data) 字符串。
fun(data)会放到script标签做为js执行。此时会调用fun函数，将data做为参数

题目4： CORS是什么？

CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。 实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。

题目5： 根据视频里的讲解演示三种以上跨域的解决方式 ，写成博客

• 使用JSONP,CORS进行跨域请求
  使用JSONP进行跨域请求，原理更加简单，就是请求script，然后服务器将信息用script语言进行包裹，发送回来，浏览器运行script，解析信息。这样兼容性更好，但是需要服务器配合，将发送的信息进行处理，同时，也不安全，毕竟发送回来的脚本直接运行，没有任何判定。

使用CORS进行跨域请求，就是ajax的升级版，对于前端，没有任何新增工作量，主要是后端需要对跨域请求的ajax进行判断。

    

        
第11日前瞻：中国冲击4金 博尔特再战
        
男双力争会师决战
        
女排死磕巴西
    
    换一组

• 使用postMessage进行跨域请求
  使用postMessage是在两个页面之间进行信息交流，而不是前端和后端的交流。原理就是在页面a中iframe标签引入页面b，然后通过postMessage给页面b发送消息，同时接受页面b的消息，从而实现两个页面之间的信息交流。

页面a中引入iframe，URL为页面b地址：

    
使用postMessage实现跨域
    

        
    

//iframe标签插入页面b

页面b：

• 升级版：使用postMessage 知识点解决 ajax中POST跨域问题

原理也很简单，假如我们的域名abc.com下的abc.html页面需要发ajax请求(跨域，域名为def.com)下，那么我们还是先跨页面文档的形式，和上面一样，我们可以现在def.com下 建立一个页面，比如叫def.html. 那么我们现在还是在 abc.html 页面嵌入一个隐藏域iframe src路径指向def.com域下def,html页面。过程还是和跨文档类似，只是现在在def.html页面中 在window.onmessage 事件内写ajax请求即可。