## 跨域问题的产生原因 ### 同源策略 * 端口相同 * 域名相同 * 协议相同 例子：`http://www.example.com/dir/page.html`这个网址，协议是`http`，域名是`www.example.com`，端口是`80` >同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。**是浏览器做的努力** >同源策略限制范围 * Cookie、LocalStorage 和 IndexDB 无法读取 * DOM 无法获得 * AJAX 请求不能发送 ## 1, CROS跨域资源请求 >CORS(Cross-origin resource sharing)跨域资源请求: 浏览器在请求一个跨域资源的时候，如果是跨域的Ajax请求，他会在请求头中加一个`origin`字段，但他是不知道这个资源服务端是否允许跨域请求的。浏览器会发送到服务端，如果服务器返回的头中没有`'Access-Control-Allow-Origin': '对应网址或 * '`的话，那么浏览器就会把请求内容给忽略掉，并且在控制台报错。 ## 2, JSONP跨域 >浏览器上虽然有同源限制，但是像 srcipt标签、link标签、img标签、iframe标签，这种**在标签上通过src地址来加载一些内容的时候浏览器是允许进行跨域请求的**。 ### JSONP跨域原理 1. 创建一个script标签，这个script标签的src就是请求的地址； 2. 这个script标签插入到DOM中，浏览器就根据src地址访问服务器资源 3. 返回的资源是一个文本，但是因为是在script标签中，浏览器会执行它 4. 而这个文本恰好是函数调用的形式，即函数名（数据），浏览器会把它当作JS代码来执行即调用这个函数 5. 只要提前约定好这个函数名，并且这个函数存在于window对象中，就可以把数据传递给处理函数。 ## 3，Hash值跨域通信 >在页面A下提供iframe或frame嵌入了跨域的页面B 容器页面 -> 嵌入页通信： 在A页面中改变B的url中的hash值，B不会刷新，但是B可以用过`window.onhashchange`事件监听到hash变化