问答
- 什么是同源策略
- 同源是指域名、协议、端口号完全一样
- 同源策略：是浏览器的资源访问的一种限制，即不同源的一方资源在没有明确授权的情况下，不能读写另一方的资源。
什么是跨域？跨域有几种实现形式
- 跨域就是突破同源策略的限制，在不同源的情况下，读写对方源的资源。
实现方式
- 1.降域：声明window.document.domain的形式，有两个限制条件：1、必须是使用ifram标签引入对方网站，2、双方都要在文档中设置document.domain，3、双方的域名后缀需要相同，具有相同的上级域名。4、协议端口号相同，端口号需要在domain中省略
- 2.jsonp，利用一个网站可以引用另一个网站的资源的特性，动态的创建script，处理当前域下的函数。不能发送post请求,script只能触发get请求，不能写，安全性较低，需要双方约定token校验。
- 3.CROS，通过在另一个域下添加Access-Control-Allow-Origin:域名，允许另一个域访问
- 4.HTML5 postMessage方法，postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
- 5.location.hash或者window.name方法
jsonp 的原理是什么
- 浏览器对不同域之间的资源访问做了限制，但是一个域可以引用另一个域的资源，通过将数据放到一个资源(js)中，然后通过引用，可以实现“好像“可以访问另一个域的数据。一般是通过传递一个callback函数，需要另一个域的支持，将数据以json格式放入同名的函数中返回。达到访问的目的
CORS是什么
- “跨域资源共享”（Cross-origin resource sharing）。允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制,CORS需要浏览器和服务器同时支持,所有浏览器都支持该功能，IE浏览器不能低于IE10,浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息(Origin: http://xx.com)，实现CORS通信的关键是服务器,服务器根据这个值，决定是否同意这次请求。如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段,从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。
练习
跨域测试可在本地使用node与server-mock工具，mock简介及使用方法
- 使用mock方式，修改本地服务器模拟不同域，模拟不同请求的解决办法：
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14//hello.a.com
window.document.domain = "a.com";
setTimeout(function () {
var iframe = window.frames[0];
console.log(iframe);
iframe.window.cross();
},2000);
//a.com
window.document.domain = 'a.com';
window.cross = function () {
console.log('我是a.com');
}
` 使用jsonp方式：
a.com访问b.com并将数据打印输出1
2
3
4
5
6
7
8
9
10
11
12
13
14//a.com代码
window.abc = function (data){
console.log(data);
}
var script = document.createElement('script');
script.src = '//b.com:8080/data?callback=abc';
document.body.appendChild(script);
//b.com下router数据返回
app.get('/data',function (req, res) {
var a=req.query.callback+'('+ "{a:'b.com下'}" +')';
res.send(a);
}cors方式：
- 使用jQuery的get方法，未设cors时出现的提示，无法访问
-通过cors访问1
2
3
4
5
6
7
8//a.com请求
$.get('//b.com:8080/data',function(ret){
console.log(ret);
});
//b.com的route设置cors
res.set('Access-Control-Allow-Origin','http://a.com:8080');//设置响应头
var data = 'cors请求';
res.send(data);
- 使用jQuery的get方法，未设cors时出现的提示，无法访问