跨域解决方案详解-优快云博客

什么是跨域？
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

所谓同源是指，域名，协议，端口均相同，例如：

http://www.123.com/index.html 调用 http://www.123.com/server.PHP （非跨域）

http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）

http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）

http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

解决办法：

JSONP：

动态的创建一个<script>标签，同时src到不同源的服务端url，服务端按照约定返回一段可执行js的代码。类似这样：
callbackFunction([“customername1","customername2"])
而在客户端我们只需要定义一个预定好的回调函数即可。

var callbackFunction = function(data){
    // 处理跨域请求得到的数据
};
var script = $('<script>', {src: 'http://b.a.com/bar'})
$('body').append(script)
//其中的callbackFuncton是我们在客户端定义好的在数据请求成功后要执行的回调函数。

好了总结一下用jsonp请求数据的基本流程。

1. 首先在客户端注册一个callback, 然后把callback的名字传给服务器。
2. 服务器先生成 json 数据。
3. 然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.
4. 将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
5. 客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

jsonp的缺点

只支持GET请求和JSON格式的数据，传输的数据有限制。
没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求.
JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。

代理：

例如www.123.com/index.html需要调用www.456.com/server.php，可以写一个接口www.123.com/server.php，由这个接口在后端去调用www.456.com/server.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。

跨域资源共享(CORS)，服务器端（如PHP端）修改header（XHR2方式）
与JSONP不同，CORS 除了GET要求方法以外也支援其他的HTTP要求
header(‘Access-Control-Allow-Origin:‘)，这句代码中，服务器允许任何人访问，当然可以设置规定访问的域名，如只允许访问http: //localhost:8080/crcp这个域名下的资源，则把 代替成这个域名即可

//在php接口脚本中加入以下两句即可：
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

通过修改document.domain来跨子域
将子域和主域的document.domain设为同一个主域.前提条件：这两个域名必须属于同一个基础域名，而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域

window.name实现跨域
name 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）
原理：当在浏览器中打开一个页面，或者在页面一个中添加一个iframe时即会创建一个对应的window对象，当页面加载另一个新的页面时，window的name属性是不会变的，这样就可以利用在页面动态添加一个iframe然后src加载数据页面，在数据页面将需要的数据赋值给window.name，然而此时承载iframe的parent页面还是不能直接访问，不在同一域下iframe的name属性，这时只需要将iframe再加载一个与承载页面同域的空白页面，即可对window.name进行数据读取
www.test.com下a.html页：

<script type="text/javascript">

        var a=document.getElementsByTagName("button")[0];

        a.onclick=function(){                               //button添加click事件
            var inf=document.createElement("iframe");       //创建iframe
            inf.src="http://www.domain.com/window.name/b.html"+"?h=5"  //加载数据页www.domain.com/window.name/b.html同事携带参数h=5
            var body=document.getElementsByTagName("body")[0];
            body.appendChild(inf);                          //引入a页面

            inf.onload=function(){
                inf.src='http://www.test.com/b.html'       //iframe加载完成，加载www.test.com域下边的空白页b.html
                console.log(inf.contentWindow.name)        //输出window.name中的数据
                body.removeChild(inf)                      //清除iframe
            }
        }
</script>

www.domain.com下b.html页：

<script>
        var str=window.location.href.substr(-1,1);      //获取url中携带的参数值
        $.ajax({
            type:"get",
            url:"http://www.domain.com/a.php"+"?m="+str, //通过ajax将查询参数传给php页面
            async:true,
            success:function(res){
                window.name=res                         //将接收到的查询数据赋值给window.name
            },
            error:function(){
                window.name='error'                      //..
            }
        });
</script>

window.postMessage方法来跨域：
www.test.com下a.html页：

<script>
        /*
        * window.postMessage是html5中的方法
        * */
        window.onload = function () {
            var oInput = document.getElementById('input1');
            var oButton = document.getElementById('btn1');
            oButton.onclick = function () {
                var data = oInput.value;
                window.frames[0].postMessage(data, '*');
            }
        }
</script>
<iframe src="http://www.lamport.me/data2.html" style="display:none" frameborder="0"></iframe>
<button id="btn1">点击我通过iframe框架向http://www.lamport.me/data2.html页面发送并返回数据</button>

www.domain.com下b.html页：

<script>
    window.onmessage = function(e) {
        e = e || event;
        alert('我接受到来自外太空的数据：' + e.data);
    }
</script>

跨域问题

相关推荐