跨域的三种解决方案
跨域
什么是跨域
浏览器为了安全问题,增加的同源限制,其实请求是发出了,服务器也相应了,但是被浏览器劫持了。所谓同源是指,域名,协议,端口均相同,浏览器才会觉得符合要求,不限制你。。。
跨域解决办法有哪些?
好多,这里只介绍jsonp, cors, window.postmessage三种
-
jsonp
原理:
<script>
标签不受跨域限制,ps:所有src属性都不受同源限制,比如<img>
jsonp缺点: 只支持get请求,不支持其他类型请求;优点:兼容性很好好,可以在古老的浏览器中运行。
-
cors
cors是一个w3c标准,全称是"跨域资源共享"(cross-origin resource sharing)。它允许浏览器向跨源服务器,发出xmlhttprequest请求。
把请求分为了两种:简单请求和复杂请求。
如何分辨简单请求和复杂请求呢?只要不符合下面条件,就是复杂请求。
- 请求方法是以下三种方法之一:
head
get
post
- http的头信息不超出以下几种字段:
accept
accept-language
content-language
last-event-id
content-type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
知识点:
面对复杂请求,浏览器会在第一次先发送一个预检请求,预检请求使用的是options方法,携带
origin, access-control-request-method, access-control-request-headers
,- 服务器拒绝的话,返回也是正常http相应,只是没有
access-control-allow-origin
字段; 服务器同意的话,返回的相应里除了access-control-allow-origin
,还会有
access-control-allow-methods, access-control-allow-headers, access-control-allow-credentials,//它的值是一个布尔值,表示是否允许发送cookie。默认false,不发送 access-control-max-age // 该字段可选,用来指定本次预检请求的有效期,单位为秒, 在此期间,不用发出另一条预检请求。
- 一旦服务器通过了"预检"请求,以后每次浏览器正常的cors请求,就都跟简单请求一样,会有一个origin头信息字段。服务器的回应,也都会有一个access-control-allow-origin头信息字段。
-
html5 window.postmessage api
window.postmessage是一个安全的,基于事件的消息api
- 发送消息
需要发送的窗口wina,调用postmessage方法,即可发送消息,其中wina还可以是文档窗口中的iframe:
var iframe = document.getelementbyid('my-iframe'); var win = iframe.documentwindow;
postmessage语法:otherwindow.postmessage(message, targetorigin, [transfer]);
举栗子:win.postmessage('hello', 'ttp://jhssdemo.duapp.com/');
- 接收消息
要想接收到之前源窗口通过postmessage发出的消息,只需要在目标窗口注册message事件并绑定事件监听函数,就可以在函数参数中获取消息。
注意:postmessage只能发送字符串信息。
window.onload = function() { var text = document.getelementbyid('txt'); function receivemsg(e) { // e 有三个属性:data, origin, source console.log("got a message!"); console.log("\nmessage: " + e.data); console.log("\norigin: " + e.origin); // console.log("source: " + e.source); text.innerhtml = "got a message!<br>" + "message: " + e.data + "<br>origin: " + e.origin; } if (window.addeventlistener) { //为窗口注册message事件,并绑定监听函数 window.addeventlistener('message', receivemsg, false); }else { window.attachevent('message', receivemsg); } };