跨域解决方案整理笔记

一. 前言

①. 跨域知识：

• 在开发测试中,难免会在不同域下进行跨域操作,出于安全性考虑,浏览器中的同源策略阻止从一个域上加载的脚本获取或者操作另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用 jsonp ,iframe 等

• 要理解跨域，先要了解一下“同源策略”。
• 所谓同源是指，域名，协议，端口相同。所谓“同源策略“，简单的说就是基于安全考虑，当前域不能访问其他域的东西。

②. 跨域阻碍

• 直接 js 请求非同源服务器接口，会有如下类似报错：
  

但 :
<img> 的src（获取图片）
<link>的href（获取css）
<script>的src（获取javascript）
这三个都不符合同源策略，它们可以跨域获取数据

二. JSONP跨域解决方案

①. 知识点

• 推荐学习文章： 轻松搞定JSONP跨域请求

  • JSONP 实现跨域请求的原理简单的说，就是动态创建 <script>标签，然后利用 <script>的 src 不受同源策略约束来跨域获取数据
  • JSONP 由两部分组成：回调函数和数据

• 由此知识点，再引申出的问题就是 —— 微信小程序是如何实现跨域请求的？

②. 代码实现方式

参考网上资源，主要能完成跨域请求可以有三种写法

1). js 实现方式

• 核心代码如下，使用时只需事件触发即可，源码仅为一个Button按钮

<script type="text/javascript">
    window.onload = function() {
        var oBtn = document.getElementById('btn');
        //TODO 小小的点击事件
        oBtn.onclick = function() {
            var script = document.createElement("script");
            //TODO 注意最后的 callback参数，此为回调标识
            script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
            document.body.insertBefore(script, document.body.firstChild);
        };
    };

    //TODO 此处为回调函数
    function handleResponse(response){
        console.log(response);
    }
</script>

• 执行效果截图：
  

2). jQuery 封装 JSONP

注意：
jQuery封装的$.ajax中有一个dataType属性，如果将该属性设置成 dataType:"jsonp"，就能实现JSONP跨域了
需要了解的一点是，虽然 jQuery 将 JSONP 封装在 $.ajax 中，但是其本质与 $.ajax 不一样

• 核心代码实现：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
            $.ajax({
                async : true,
                url : "https://api.douban.com/v2/book/search",
                type : "GET",
                dataType : "jsonp", //TODO 返回的数据类型，设置为JSONP方式
                jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
                //TODO 设置回调函数名,如果不想在下面的 success:function()处理数据，
                //TODO 可以创建同名方法 handleResponse(response)
                jsonpCallback: 'handleResponse', 
                data : {
                    q : "javascript",
                    count : 1
                },
                success: function(response, status, xhr){
                    //console.log('状态为：' + status + ',状态是：' + xhr.statusText);
                    console.log(response);
                }
            });
        });
    });
</script>

3). $.getJSON(）

• 这种方式，代码量极少，只要求在地址中加上callback=?参数即可，也做下参考

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
            $.getJSON("https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?", function(data){
                console.log(data);
            });
        });
    });
</script>

③. JSONP的优缺点

1). JSONP的优点

• 它不像 XMLHttpRequest 对象实现的 Ajax 请求那样受到同源策略的限制；
• 它的兼容性更好，在更加古老的浏览器中都 可以运行，不需要 XMLHttpRequest 或 ActiveX 的支持
• 完美解决在测试或者开发中获取不同域下的数据，用户传递一个callback 参数给服务端，然后服务端返回数据时会将这个 callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了.

【据说】：qq空间大部分用的都是 jsonp

2). JSONP的缺点

• 它只支持 GET请求而不支持POST等其它类型的HTTP请求；
• 它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript 调用的问题。
• 在登录模块中需要用到 session来判断当前用户的登录状态,这时候由于是跨域的原因,前后台的取到的 session 是不一样的,那么就不能就 session 来判断.
• JSONP是一种脚本注入(Script Injection)行为，所以有一定的安全隐患
• 通过跨域请求数据，受制于服务端的输出格式，一旦发生变化，很可能自己的项目无可用数据加载，所以一般要选择可信任的第三方服务网站

④. 可行方案思考

万事总有优缺点，不要太过纠结

• 1.考虑到JSONP 的一系列问题，也可以建议采用 后台进行设置允许跨域请求

  Header set Access-Control-Allow-Origin *

• 2.为了防止 XSS 攻击我们的服务器， 我们可以限制域，比如

  Access-Control-Allow-Origin: http://blog.csdn.net

⑤. 文章推荐

• 跨域解决方案二：使用 JSONP 实现跨域
• JSONP安全防范解决方案新思路

三. CORS 方案

CORS 全称(跨源资源共享)：Cross-Origin Resource Sharing —— W3C推荐的机制

• 【适用场景】：

承载的信息量大，get 形式搞不定，需选用 post 传输。CORS支持所有类型的传输

• 【CORS思想】：

使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

• 整个CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。

• 浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
  因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信

• 当然如果设置成下面这样，所有的跨域都可以实现了，但这样毕竟太不安全

"Access-Control-Allow-Origin:*";//允许任何域向我们的服务器发送请求

• 为避免造轮子，相关内容推荐建议参考文章:

1. —— 最常用的两种跨域解决方案
2. —— 跨域解决方案一：使用CORS实现跨域
3. —— 跨域资源共享 CORS 详解(阮一峰)

四. 设置 document.domain方案

推荐参考：document.domain解决跨域问题，详细讲解

• 原理：相同主域名下不同子域页面，通过设置 document.domain 让他们同域

【限制】：
这两个域名必须属于同一个基础域名！而且所用的协议，端口都要一致，否则无法利用 document.domain 进行跨域

①. 代码实现方式

• 注：此处代码借用了文章：跨域常见解决方案

// url http://bentos.com/foo
var ifr = document.createElement('iframe');
ifr.src = 'http://b.bentos.com/foo'; 
ifr.onload = function()
{
  var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
  ifrdoc.getElementsById("foo").innerHTML);
};
ifr.style.display = 'none';
document.body.appendChild(ifr);

• 上述代码所在的URL是http://bentos.com/foo，它对http://b.bentos.com/bar的DOM访问，要求后者将 document.domain 往上设置一级

// URL http://b.bentos.com/bar
document.domain = 'bentos.com'
// URL: http://b.bentos.com/foo
var data = {
    foo: 'bar',
    bar: 'foo'
};
callback(data);

五. window.name 方案

window.name 的美妙之处：name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）

• 推荐学习此篇文章【评价超高】： 使用 window.name 解决跨域问题

六. CSST (CSS Text Transformation)

概念：一种用 CSS 跨域传输文本的方案。相比 JSONP 更为安全，不需要执行跨站脚本。
原理： 通过读取 CSS3 content 属性获取传送内容。

• 推荐参看文章 王集鹄（zswang）CSST

• 调用流程图：
  

毕竟作为后端开发人员，个人表示对此方案理解起来还是有些难度的.

• 与 JSONP 安全性比较
  

七. window.postMessage

• 原理：HTML5允许窗口之间发送消息
• 限制：浏览器需要支持HTML5，获取窗口句柄后才能相互通信

window.postMessage 是一个安全的跨源通信的方法。
一般情况下，当且仅当执行脚本的页面使用相同的协议（通常都是 http）、相同的端口（http默认使用80端口）和相同的 host（两个页面的 document.domain 的值相同）时，才允许不同页面上的脚本互相访问
window.postMessage 提供了一个可控的机制来安全地绕过这一限制，当其在正确使用的情况下, window.postMessage 解决的不是浏览器与服务器之间的交互，解决的是浏览器不同的窗口之间的通信问题，可以做的就是同步两个网页，当然这两个网页应该是属于同一个基础域名。

• 可参考下面的文章介绍： 跨域解决方案大全

多说一点：
这是一个安全的跨域通信方法，postMessage(message,targetOrigin) 也是 HTML5 引入的特性。
可以给任何一个 window发送消息，不论是否同源
第二个参数可以是*但如果你设置了一个URL但不 相符，那么该事件不会被分发

• 看一个普通的使用方式吧

// URL: http://bentos.com/foo
var win = window.open('http://b.com/bar');
win.postMessage('Hello, bar!', 'http://b.com'); 


// URL: http://baidu.com/bar
window.addEventListener('message',function(event) {
    console.log(event.data);
});