跨域的三种解决方案
跨域
什么是跨域
浏览器为了安全问题，增加的同源限制，其实请求是发出了，服务器也相应了，但是被浏览器劫持了。所谓同源是指，域名，协议，端口均相同，浏览器才会觉得符合要求，不限制你。。。
跨域解决办法有哪些？
好多，这里只介绍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);
}
};
