前端常见跨域解决方案

广义的跨域

1.) 资源跳转： A链接、重定向、表单提交
2.) 资源嵌入：<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链
3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等

其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

同源策略限制以下几种行为：
1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送

跨域解决方案

1、通过jsonp跨域
2、 document.domain + iframe跨域
4、 window.name + iframe跨域
3、 location.hash + iframe
5、 postMessage跨域
6、跨域资源共享（CORS）
7、 ~~nginx代理跨域~~
8、 ~~nodejs中间件代理跨域~~
9、 WebSocket协议跨域

jsonp

服务端不能直接返回json字符串，会报错：Uncaught SyntaxError: Unexpected token :
正确格式参考（php版）：

1 2	$data=$_GET['callback'].'('.json_encode($ret).')'; echo $data;

只能是get；jquery也是get，即使post也会转为get(和ajax没有半毛钱关系，jQuery只是伪装)
从原理分析；区分get/post请求

postMessage

//page
function msgChatIfrm(type,data){ // assume ifrm had loaded
    // chatIfrm.contentWindow.postMessage(JSON.stringify({type,data}),chatServer); //ie limit
    chatIfrm.contentWindow.postMessage({type,data},chatServer);

    // NOTE: 如果ifrm没有loaded 发送消息，报错：
    // Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://192.168.1.61') does not match the recipient window's origin ('null').
}
window.onmessage=function(event){
    log('on message:',event) //
    if(event.origin!==chatServer) return;

    var data=oData.data;
}

// iframe
function msgTop(type,data){
    if(top==window)return;
    top.postMessage({type,data},'*');
}
window.onmessage=function(event){
    log(event);
    /* 单独打开后iframe页面后，输出了undefined，undefined;  ff没有输出；估计是插件。另一个chrome也没事
    // NOTE: 1.不知道为什么会接收到这样一条事件;不知道哪里发送了事件。
    // event:{data:"",origin: "http://127.0.0.1:59353", lastEventId: "", source: Window} //和本页面同
        // 正常发过来的是：{data:"test",origin: "http://127.0.0.1:59353", lastEventId: "", source: Window}
        // 所以，加了origin的判断
    // if(location.origin==event.origin) return; 
    */

    // if(event.origin!=top.location.origin) return; //top.location 会有跨域问题，取不到；本地文件也没有location
    
    // MDN example: 是监听到消息，得到source后再发送消息
    // 我们能信任信息来源吗？
    if (event.origin !== "http://example.com:8080") return;
    event.source.postMessage("hi there yourself!",event.origin);
}

其他：

通过window.open()打开的窗口

在 var targetPage = window.open(‘http://target.com') 打开新页面之后需要等到 http://target.com 页面加载完成之后才能进行 postMessage 跨域通信，但是在跨域的情况下我们是无法对 targetPage 进行 onload 事件监听的，所以这里只能做延迟 setTimeout 或者定时 setInterval 处理。
同样的，在页面内嵌入 iframe 页面的情况下，我们也需要等到页面内的 iframe 加载完成之后进行 postMessage 跨域通信。

跨域之iframe

2018.2.8 星期四 16:00

页面嵌套iframe是比较常见的，比如QQ相关业务页面的登录框一般都是iframe的。使用ifrmae跨域要满足一个基本条件，父页面和子页面都是自己可以控制的，如果随便把iframe指向一个其他网站，想通过跨域手段操作它基本上是不可能的。
$_PS: 跨域时的全屏操作

一 document.domain

document.domain是比较常用的跨域方法。实现最简单但只能用于同一个主域下不同子域之间的跨域请求，比如 foo.com 和 img.foo.com 之间，img1.foo.com 和 img2.foo.com 之间。只要把两个页面的document.domain都指向主域就可以了，比如document.domain=’foo.com’;。
设置好后父页面和子页面就可以像同一个域下两个页面之间访问了。父页面通过ifr.contentWindow就可以访问子页面的window，子页面通过parent.window或parent访问父页面的window，接下来可以进一步获取dom和js。

二 window.name

只要不关闭浏览器，window.name可以在不同页面加载后依然保持。尝试在浏览器打开百度baidu.com，然后在控制台输入window.name=’aaa’;回车，接着在地址栏输入qq.com转到腾讯首页，打开控制台输入window.name查看它的值，可以看到输出了”aaa”。

三 location.hash

较常用，把传递的数据依附在url上

四 window.navigator

IE6的bug，父页面和子页面都可以访问window.navigator这个对象，在navigator上添加属性或方法可以共享。因为现在没有IE6环境，这里就不写例子了。

五 postMessage

HTML5新增方法，现在浏览器及IE8+支持，简单易用高大上。

.postMessage(message, targetOrigin)参数说明：
message: 是要发送的消息，类型为 String、Object (IE8、9 不支持)
targetOrigin: 是限定消息接收范围，不限制请使用 ‘*’

‘message’, function(e)回调函数第一个参数接收 Event 对象，有三个常用属性：
data: 消息
origin: 消息来源地址
source: 源 DOMWindow


**&_PS:** [window.postMessage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage)

都是404了    
# A jsonp
# B iframe
# C CORS
## 一 XMLHttpRequest (modern browser)
## 二 XDomainRequest (IE8+)
# D 图像Ping (略)
# E flash (略)

其它参考：

localStorage 跨域

a页面内嵌一个iframe - b页面。域名不一样
b页面有读取/设置localStorage (let storage = widnow.localStorage 就报错)
Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

解决方法：
在Chrome设置菜单中：高级 > 隐私设置和安全性 > Cookie 及其他网站数据 > 常规设置 > (选择)允许所有Cookie