【前端分享】关于跨域

May 05, 2016

### 何为跨域? 在浏览器上当前访问的网站向另一个网站发送请求获取数据的过程就是跨域请求。

哪些情况造成跨域?
1) 域名不同 (域名访问和ip访问也造成跨域)
    http://www.example.com (117.34.1.1)
    http://117.34.1.1

    http://www.example.com
    http://www.case.com

2) 子域名不同
    http://www.example.com
    http://e.example.com

3) 端口不同
    http://www.example.com(:80)
    http://www.example.com:8080

4) 协议不同
    http://www.example.com
    https://www.example.com

浏览器的同源策略(这块翻译的javascript同源有误) https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

实现跨域访问的方式

1) JSONP跨域
2) iFrame跨域
3) 协议跨域 (跨域资源访问CORS)

JSONP跨域

demo http://www.lichenfan.com/dig/jsonp.htm

原理: 利用script标签src可以用外链的功能。
<script src="http://www.external.com/link/action.js"></script>

必要条件:
1、 externalLink返回的内容必须为一段可执行脚本
2、 当前域同外域约定好脚本执行的函数名
    (jsonpCallback)
3、 传入函数的实参data
    action.js  content:

    jsonpCallback(data);

    data type:  number| string | boolean | object

    当前域声明函数:
    jsonpCallback(result) {
        /* code statement */
    }

iFrame跨域

demo http://www.lichenfan.com/dig/outer.htm

iframe存在页面嵌套关系,即会有父页面(outer.html)和子页面(inner.html)。
就存在父页面使用子页面的数据,子页面使用父页面数据的情况。
我们来一一说明:

1. 非一个根域:
    需要一个中间页面做代理,通过window.name获取不同域页面下的数据.
    原理: iframe加载不同的src,window.name是可以被传递的。
    父页面: lichenfan.com
    子页面: innomachine.com.cn

    父页面--->子页面数据   
    1)   load 子页面,子页面设置window.name. 
    2)   load 代理页面,代理页面和父页面同域。

    子页面--->父页面数据
    load 子页面,给子页面的页面路径修改不同的hash
    子页面定义window.onhashchange的事件,触发获取数据。

2. 同一个根域: 
    www.lichenfan.com 和  sen.lichenfan.com
    在当前的文档下设置 document.domain = "lichenfan.com" 即可。

    父页面--->子页面数据   
    window.iframe.contentWindow.xx;

    子页面--->父页面数据
    window.parent.xxx;

协议跨域

这个最简单,被访问域名在webservice配置跨域访问的header即可。
会用到两个header
Access-Control-Allow-Origin:   * | 访问域名;
Access-Control-Allow-Methods:  GET | POST | PUT | DELETE;

demo http://www.lichenfan.com/dig/cros.htm