前端跨域常见解决方式和适用场景

跨域的定义

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，一般来说，web中设计到的资源跳转，如重定向，a链接，link或script标签，以及资源请求、脚本请求都可以被称之为跨域操作。
而我们在开发中常见的跨域问题，通常是由于浏览器的同源限制导致的。

同源策略

同源策略/SOP（Same origin policy）是浏览器的一种核心安全机制，用于保障浏览器不受XSS、CSRF等共计。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
举个栗子，

1. http://www.domain.com/a.js访问https://www.domain.com/api是不被允许的，协议不同
2. http://www.domain.com:3000/a.js访问http://www.domain.com:8080/api是不被允许的，端口不同
3. http://www.domain.com/a.js访问http://www.domain.cn/api是不被允许的，二级域名不同
4. http://www.domain.com/a.js访问http://192.168.2.1/api 假设域名对应相同ip地址，也是不被允许的，域名仍视为不一致

同源策略限制以下几种行为：

1. Cookie、LocalStorage 和 IndexDB 无法读取
2. DOM 和 Js对象无法获得
3. AJAX 请求不能发送

请求跨域的解决方式

jsonp:
利用script标签，请求任意跨域地址的资源， 返回资源只要content-type为application/javascript，并且返回回来的数据为调用一个js function，数据则包裹在方法内部，这个js function需要在本地的代码中提前准备好，一但准备的游离script标签src被附上值并且插入到dom tree当中之后，浏览器就会对这个src进行请求，拉回来的代码直接执行，跨域成功！

但是script标签会有一个限制，就是它只支持get方法，如果用户的请求会带有一些隐私数据的话，需要改用post方式，不是没有办法，html中有form tag可以支持post提交，只需要新建一个form tag， 内部包含几个input输入框，输入框name就是想提交的数据的key，form的action就为提交的地址，为防止提交动作后跳转到action地址去，需要利用target属性指向一个空的iframe就不会跳转了，最后吧form的method属性设置为post，最后添加一个input type为submit，调用form dom的submit方法，就可以提交数据了

iframe跨域
iframe跨域有以下几种方式：

1. document.domain + iframe
   此方案仅限主域相同，子域不同的跨域应用场景。
   实现原理：两个页面都通过 js 强制设置 document.domain 为基础主域，就实现了同域。
   1.）父窗口：

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>

2.）子窗口：

<script>
    document.domain = 'domain.com';
    // 获取父窗口中变量
    alert('get js data from parent ---> ' + window.parent.user);
</script>

2. location.hash + iframe 跨域
   实现原理： a 欲与 b 跨域相互通信，通过中间页 c 来实现。 三个页面，不同域之间利用 iframe 的 location.hash 传值，相同域之间直接 js 访问来通信。
   具体实现：A 域：a.html -> B 域：b.html -> A 域：c.html，a 与 b 不同域只能通过 hash 值单向通信，b 与 c 也不同域也只能单向通信，但 c 与 a 同域，所以 c 可通过 parent.parent 访问 a 页面所有对象。
   1.）a.html：

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');

    // 向b.html传hash值
    setTimeout(function() {
        iframe.src = iframe.src + '#user=admin';
    }, 1000);
    
    // 开放给同域c.html的回调方法
    function onCallback(res) {
        alert('data from c.html ---> ' + res);
    }
</script>

2.）b.html：

<iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');

    // 监听a.html传来的hash值，再传给c.html
    window.onhashchange = function () {
        iframe.src = iframe.src + location.hash;
    };
</script>

3.）c.html：

<script>
    // 监听b.html传来的hash值
    window.onhashchange = function () {
        // 再通过操作同域a.html的js回调，将结果传回
        window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
    };
</script>

3. window.name + iframe 跨域
   window.name 属性的独特之处：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）
   1.）a.html

var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');

    // 加载跨域页面
    iframe.src = url;

    // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy页)成功后，读取同域window.name中数据
            callback(iframe.contentWindow.name);
            destoryFrame();

        } else if (state === 0) {
            // 第1次onload(跨域页)成功后，切换到同域代理页面
            iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';
            state = 1;
        }
    };

    document.body.appendChild(iframe);

    // 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）
    function destoryFrame() {
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
};

// 请求跨域b页面数据
proxy('http://www.domain2.com/b.html', function(data){
    alert(data);
});

2.）proxy.html:
中间代理页，与 a.html 同域，内容为空即可。

3.）b.html：

<script>
    window.name = 'This is domain2 data!';
</script>

通过 iframe 的 src 属性由外域转向本地域，跨域数据即由 iframe 的 window.name 从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。

postMessage跨域
postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题： a.） 页面和其打开的新窗口的数据传递 b.） 多窗口之间消息传递 c.） 页面与嵌套的iframe消息传递 d.） 上面三个场景的跨域数据传递 用法：postMessage(data,origin)方法接受两个参数 data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。 origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

cors跨域(cross origin resource share):

依赖于XMLHttpRequest对象
分两种情况：
简单请求
请求方式只限于：GET，POST，HEAD
请求头只包含以下几种：content-language, content-type, accept, accept-language, (width, DPR, DOWNLINK, save-data, viewport-width), 其中content-type限制为text/plain，multipart/form-data，application/x-www-form-urlencoded，就是form表单的enctype支持的三种编码方式，表现上来说第一种是空格变成+，第二种是完全不处理，后台方便对数据进行流对象来操作数据，第三种是对所有的字符串都进行编码，是默认值
当然请求头还会加上Origin参数表示请求来源

浏览器判断是否跨域会根据返回头中的access-control-allow-origin进行判断, 没有的这个返回头浏览器就会判断为跨域, 对返回数据进行屏蔽, 表现就是状态为fail, 看不到响应头

复杂请求
会先发送一个预检请求, 请求头包括access-control-request-method, access-control-request-headers, 第一个是为了验证请求方法是否被服务器支持, 第二个是为了验证请求的请求头是否被支持,这里只加入非简单请求范围内的请求头

返回响应头会包括: access-control-allow-origin, access-control-allow-methods, access-control-allow-headers, access-control-max-age, 四种

然后再进行真正的请求, 请求端请求依旧会带上access-control-request-method, access-control-request-headers,
但是返回头就只包括的access-control-allow-origin

如果要携带cookie, 那么需要在请求头上带上cookie请求头, 把cookie带在这个请求头上, 然后服务器返回access-control-allow-credential, 外加set-cookie字段, 这种请求要求 access-control-allow-origin不能为*

客户端只能拿到一些基本的响应头, 包括Cache-Control(控制缓存)、Content-Language(控制语言)、Content-Type(控制文本类型)、Expires(控制缓存, 优先级低于cache-control)、Last-Modified(控制协商缓存)、Pragma(也是控制缓存), 其他的头要想拿到都需要响应头指定access-control-expose-headers

nginx跨域转发
这个比较容易, 只需要在该域名的服务器下面配一个nginx代理, 在其对应的url的location下面加一个proxy_pass即可, 不受跨域限制

总结

以上就是前端跨域的大部分场景以及解决办法，欢迎讨论与补充！