前端跨域及其原理

前端跨域汇总

什么是跨域

要搞懂什么是跨域要明白同源策略,同源策略满足条件有三个:
1.协议相同
2.端口相同
3.域名相同
同源策略有什么限制?
1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送

url中任意一个部分不相同都会造成跨域问题,但是也有例外,script标签的src和link标签的href及iframe的src是不受同源策略的限制。这个便可以成为我们解决跨域问题的桥梁。

jsonp跨域

jsonp原理就是利用了script标签的src属性不受同源策略的影响。但是他有一个致命的缺点,jsonp的跨域只支持get请求。
原生的实现

var script = document.createElement('script');
script.type = 'text/javascript';
// 传参并指定回调执行函数为onBack
script.src = 'http://www.crossDomain.com:8080/login?user=admin&callback=callback';
document.head.appendChild(script);

// 回调执行函数
function callback(res) {
    alert(JSON.stringify(res));
}

服务器端返回

callback({"status": true, "user": "admin"})

cors跨域

cors跨域主要是在服务端进行的
服务端设置Access-Control-Allow-Origin即可,前端无须设置,若要带cookie请求:前后端都需要设置。
注意:如果需要带cookie ,Access-Control-Allow-Origin不能设置为(允许所有域),必须设置为具体的地址,例如 Access-Control-Allow-Origin:http://www.crossDomain.com:8080*
前端代码:

var xhr = new XMLHttpRequest(); 
// 前端设置是否带cookie,true为携带
xhr.withCredentials = true; 
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//设置
xhr.send('user=admin');
xhr.onreadystatechange = function() {
 if (xhr.readyState == 4 && xhr.status == 200) {
    alert(xhr.responseText);
}};

服务器端设置

response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 
// 允许前端带认证cookie:启用此项后,上面的域名不能为'*',必须指定具体的域名,否则浏览器会提示
response.setHeader("Access-Control-Allow-Credentials", "true"); 
// 提示OPTIONS预检时,后端需要设置的两个常用自定义头
response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

cors跨域的原理是基于option请求的,option请求的两个作用
1、获取服务器支持的HTTP请求方法;
2、用来检查服务器的性能。

进行跨域请求的时候,客户端首先发送服务器一个预检请求,预检请求是一种透明服务器验证机制。预检请求首先需要向另外一个域名的资源发送一个 HTTP OPTIONS 请求头,其目的就是为了判断实际发送的请求是否是安全的。客户端获取到option中返回的服务器信息,获取到当前的服务器设置的允许的域,客户端再次带着跨域的信息和真正的请求向服务器发送请求,服务器相应并带回跨域信息,浏览器端认证返回信息中跨域信息允许,则成功跨域。如果Origin指定的源,不在许可范围内,服务器会返回一个正常的HTTP回应。浏览器发现,这个回应的头信息没有包含Access-Control-Allow-Origin字段,就知道出错了,从而抛出一个错误,被XMLHttpRequest的onerror回调函数捕获。但是状态吗有可能还是200。其实这时候是进行了正确的请求只是浏览器端不认识,所以才造成了跨域。

postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API,且是为数不多可以跨域操作的window属性之一,它可用于解决以下方面的问题:
a.) 页面和其打开的新窗口的数据传递
b.) 多窗口之间消息传递
c.) 页面与嵌套的iframe消息传递
d.) 上面三个场景的跨域数据传递
postMessage(data,origin)方法接受两个参数
origin: 协议+主机+端口号 为要跨的域。
data:为要发送的数据。
eg: window.parent.postMessage(JSON.stringify(data), ‘http://www.crossdDmain.com’);
还有其他几个,但是我个人觉得用的都比较少。所以就不记录了
补充一张图

你可能感兴趣的:(前端知识点)