什么是同源策略

出处

浏览器的同源策略，服务器端是没有同源策略的

script标签的src
img的src
iframe的src
link的href

是不受同源策略限制的

存在的合理性

浏览器的同源策略出于对cooKie安全性的考虑

不存在的话存在什么样的问题

源是什么，怎么样就算跨域，跟谁比较

源：
window.location.origin = protocol+host+port
origin不一样

解决方案

情况一：跨域调用接口请求数据

1.jsonp

原理：script标签不受同源策略限制
缺点：只支持get请求
现成库：Jsonp

2.cors(cross origin resource share跨域资源共享)

实现机制：
浏览器自动实现，不需要前端开发者做额外的工作，跟普通ajax请求一样，只是(后面重点)：当浏览器检测到ajax的url跨域时，会自动附加一些请求头（Origin本次请求来自的源），甚至会多发一次请求option。

option请求的作用：查询指定url支持的方法。会返回Allow:get,post,head这样的内容。

所以，实现cors的关键是，服务器。只要服务器实现了cors接口，就能进行跨域通信。

3.代理服务器

原理：服务器不受同源策略的限制
举个栗子：webpack-dev-server配置proxy

情况二：iframe传递数据

1.条件：一级域名相同，二级域名不同。设置document.domain为相同的部分

举个栗子：
www.silvia.com
www.wxy.silvia.com
设置document.domain = “silvia.com”

2.postMessage

测试下

3.利用hash

//父
var ifr = document.getElementById('ifr');
var newSrc = ifr.src + '#lalla';
document.getElementById("btn").addEventListener('click',function(e){
    ifr.src = newSrc;
})

//在父获取iframe的window：
document.querySelector('iframe').contentWindow
//在iframe获取父window:
window.parent

同源策略及解决方案