1、什么是同源策略
同源策略是浏览器出于安全性的考量而制定的策略，默认情况下，XHR对象只能访问与包含它的页面位于同一个域中的资源，即限制了来自不同源的"document"或脚本对当前"document"读取或设置某些属性。
我们知道URL(document.URL)由协议(http/https/file/ftp)、域名(doucment.domain)、端口(port:3000/4000/80/8080)、还有路径组成，如果两个URL的协议、域名、端口(URL组成部分前3个）相同，则表示他们同源。
a)a.b.com a.b.com/a.html 同源，域相同。
b)b.com a.b.com 不同源，域不同。
c)a.b.com:8080 a.b.com/3000 不同源，端口不同。
d)http://a.b.com https://a.b.com 不同源，协议不同
2、 什么是跨域？跨域有几种实现形式
跨域：跨域顾名思义就是突破同源策略的限制，去不同的域下访问数据。
实现形式：jsonp、CORS：跨域资源共享（Cross-Origin Resource Sharing）、降域、postMessage()
3、JSONP 的原理是什么
在html下引入script标签是可以请求不同源的数据。那么也就是说同源策略并没有对script的src进行监测，而且script的特性是在页面加载时会访问script的src，那么我们可以将这个src想象成一个简单的get请求，通过访问这个地址，我们可以配合后端对路由进行参数配置，使这段访问的src中加入一些参数，从而灵活的从后端调取数据。我们甚至可以通过访问这个src来调用客户端里存在的方法，比如我们有一个function:
function jsonFn(param) { //do sth }
<script src='http://a.xx.com:3000/getSth?callback=jsonFn></script>
//与前面的jsonFn对应，注意先后顺序以防报错: jsonFn is not defined.
//server-side - routes
app.get("/getSth", function(){
let data = req.query.callback + '(param)' ;//提取问号后callback键值对儿的值并加工成函数调用形式的字符串。
res.send(data);
});
优缺点：
优点：它的兼容性更好，在更加古老的浏览器中都可以运行。
缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求。
4、CORS是什么
CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它是一种AJAX跨域请求资源的方式，对于开发者来说，CORS通信与AJAX通信没有差别。
它的实现方式很简单，并且由浏览器自动处理，不需要做额外的工作。当我们使用 XMLHttpRequest 发送请求时，假如浏览器发现请求不符合同源策略，就会给该请求加一个请求头：Origin，后台在处理时，假如确定接收请求就会在返回结果中加一个响应头：Access-Control-Allow-Origin，再由浏览器自己判断响应头中有没有包含Origin的值，如果有浏览器就会处理响应，我们就可以拿到数据，如果不包含浏览器就会拒绝，此时我们就无法拿到响应数据。
优缺点：
优点：可以处理GET、POST等所有HTTP请求，不像JSONP那样只支持GET请求。使用时简单，只要服务器实现了CORS接口，就可以跨源通信。应该说CORS是最好的处理跨域的方式，它是跨域处理方案未来的趋势。
缺点：响应的它的兼容性较差，IE浏览器不能低于IE10。
5、降域
与JSONP 和 CORS 不同，降域这种解决方案只适用于主域相同，子域不同的用场景，一般主要用于页面有 iframe 的情况。具体的原理很简单：两个页面都要通过JS来强制设置 document.domain 为基础的主域，就实现了降域跨域。
6、postMessage
postMessage()是HTML5引入的新API，主要被用来解决跨域和跨窗口消息传递等问题，它的应用场景相对广泛，可以被用于解决以下问题：页面和其打开的新窗口的数据传递、多窗口之间消息传递、页面与嵌套的iframe消息传递、上面三个问题的跨域数据传递。
otherWindow.postMessage(message, targetOrigin, [transfer]);
我们通过给postMessage()方法设置参数来允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。postMessage有两个参数。
message，将要发送到其他 window的数据。
targetOrigin，通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串“*”（表示无限制）或者一个URI。
网友评论