浏览器跨域

使用同源策略的原因：出于安全考虑，主要时为了防止 CSRF攻击
【利用用户的登录专改发起恶意请求】
=>跨域主要时为了阻止用户读取到另一个域下的内容
请求跨域的结果是，请求被发送出去了，但是相应被浏览器拦截了。
跨域的几种方式：

• JSONP（JSON with Padding）
• CORS（跨域资源共享）
• postMessage
• document.domain

1、JSONP：JSONP是JSON的一种使用模式
原理：利用标签没有跨域限制的漏洞，通过指向ige需要访问的地址并提供一个回调函数来接收数据

1 
2 
3     function jsonp(data){
4 
5     }
6 

缺点：仅限于get请求

数据接收原理：jsonP本质上是通过将情趣模拟为加载，通常带有其他参数和一个callback函数名，然后服务器根据接收到的参数里的回调函数名如 callback({data…})，拼装数据导函数里，然后脚本加载成功，执行本地同名回调函数，从而达到跨域。
2、CORS（跨域资源共享）
CORS需要浏览器和后端同时支持
浏览器会自动进行CORS通信，实现CORS通信的关键是通过后端，只要后端实现了CORS，就实现了跨域
服务端设置Access-Control-Allow-Origin就可以开启CORS，该属性表示哪些域名可以访问资源，若设置通配符则表示所有网站都可以访问资源
3、postMessage
常用于获取嵌入页面中的第三方页面的数据，一个页面发消息，另一个页面判断来源并接收消息
1）发送端：
window.parent.postMessage(‘message’,’http://test.com’);
2）接收端
var mc = new MessageChannel();
mc.addEventListener(‘message’,event=>{
var origin = event.origin || event.originalEvent.origin;
if(origin == ‘http://test.com’){
console.log(‘验证通过’);
}
});
4、document.domain
只能用于主域名相同的情况下，如a.test.com和b.test.com
著需要给页面添加document.domain = ‘test.com’，表示主域名相同即可