js跨域问题 常见的集中解决方案

最新推荐文章于 2022-05-15 07:00:00 发布
最新推荐文章于 2022-05-15 07:00:00 发布
阅读量779 收藏 1
点赞数 1
分类专栏： js基础 leon前端进阶之路

一、什么是跨域？

要理解跨域问题，就先理解好概念。跨域问题是由于JavaScript语言安全限制中的同源策略造成的.

简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.

复制代码 
URL                             说明          是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js         同一域名下          允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js  同一域名下不同文件夹  允许
http://www.a.com:8000/a.js
http://www.a.com/b.js         同一域名，不同端口    不允许
http://www.a.com/a.js
https://www.a.com/b.js        同一域名，不同协议    不允许
http://www.a.com/a.js
http://70.32.92.74/b.js       域名和域名对应ip     不允许
http://www.a.com/a.js
http://script.a.com/b.js      主域相同，子域不同    不允许
http://www.a.com/a.js
http://a.com/b.js             同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js
http://www.a.com/b.js         不同域名 不允许
复制代码

同源策略设计之初是为了安全，但也对正常的跨域开发造成了一定影响，不过还是有不同的解决办法的。

 

二、解决办法

跨域问题，更多的情况是出现在需要用ajax获取数据时，那么现在就先看个非跨域的栗子

（功能主要是从后台获取names列表，并展示出来）

前端部分：

复制代码 
<body>
    <div id="box">
        <ul>names:</ul>
    </div>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript">
        function addContents(data){ 
            var box = document.getElementById('box'),
                ul = box.getElementsByTagName('ul')[0],
                fragment = document.createDocumentFragment(),
                li;
            for(var i=0,j=data.length; i<j; i++){ 
                li = document.createElement('li');
                if(data[i].hasOwnProperty('name')){ 
                    li.appendChild(document.createTextNode(data[i].name));
                    fragment.appendChild(li);
                }
            }
            ul.appendChild(fragment);
        }

        $.ajax({ 
            url: './cross_domain.php',
            //url: 'http://demoff.sinaapp.com/cross_domain.php',
            type: 'GET',
            dataType: 'json',
            data: {},
            success: function(data){ 
                addContents(data);
            },
            error: function(xmlHttpRequest,textStatus,error){ 
                console.log(xmlHttpRequest.status);
                console.log(textStatus);
            }
        });
    </script>
</body>
复制代码

现在后端PHP是设在同域之下：

复制代码 
<?php 
    // 接收数据
    // $jsoncallback = $_GET["jsoncallback"];

    // 构造数据
    for($i=1; $i<=5; $i++){ 
        $names[] = array("name" => "name" + $i);
    }

    // $data = $jsoncallback . "(" . json_encode($names) . ")";
    
    $data = json_encode($names);
    echo $data;
?>
复制代码

ok, 这样一来数据可以正常加载，形如：

      

现在设置为跨域：将ajax请求部分的url域设为 demoff.sinaapp.com 即对换注释部分，就会产生跨域问题

 

好那就进行解决吧

 

 

　　第一： 使用 跨域资源共享（CORS）

CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。

使用方法也很简单，在php后端设置 Access-Control-Allow-Origin 头即可，如：

复制代码 
<?php 
    header("Access-Control-Allow-Origin: *");
    //header("Access-Control-Allow-Origin: 我的域或ip");
    
    // 接收数据
    // $jsoncallback = $_GET["jsoncallback"];

    // 构造数据
    for($i=1; $i<=5; $i++){ 
        $names[] = array("name" => "name" + $i);
    }

    // $data = $jsoncallback . "(" . json_encode($names) . ")";
    
    $data = json_encode($names);
    echo $data;
?>
复制代码

　　

　　第二：使用jsonp 

什么是jsonp？维基百科的定义是：JSONP（JSON with Padding）.

JSONP也叫填充式JSON，是应用JSON的一种新方法，只不过是被包含在函数调用中的JSON，例如：callback({"name","name1"});

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。

jsonp的原理是：

就是利用<script>标签没有跨域限制，来达到与第三方通讯的目的。

当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。 
第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），形如： 
callback({"name":"hax","gender":"Male"}) 
这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。 

（我们知道 <link href   <img src   <script src   请求的数据都不受域的限制）

jsonp的使用方法：

客户端指明使用jsonp的方式，服务器接受参数，并外包裹要返回的数据，再一并返回。

jQuery的ajax简单描述：

前端指明data:jsonp , 在标明自定义的参数名 jsonp:jsoncallback

复制代码 
<body>
    <div id="box">
        <ul>names:</ul>
    </div>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript">
        function addContents(data){ 
            var box = document.getElementById('box'),
                ul = box.getElementsByTagName('ul')[0],
                fragment = document.createDocumentFragment(),
                li;
            for(var i=0,j=data.length; i<j; i++){ 
                li = document.createElement('li');
                if(data[i].hasOwnProperty('name')){ 
                    li.appendChild(document.createTextNode(data[i].name));
                    fragment.appendChild(li);
                }
            }
            ul.appendChild(fragment);
        }

        $.ajax({ 
            //url: './cross_domain.php',
            url: 'http://demoff.sinaapp.com/cross_domain.php',
            type: 'GET',
            dataType: 'jsonp',
            jsonp: 'jsoncallback',
            data: {},
            success: function(data){ 
                addContents(data);
            },
            error: function(xmlHttpRequest,textStatus,error){ 
                console.log(xmlHttpRequest.status);
                console.log(textStatus);
            }
        });
    </script>
</body>
复制代码

后端服务器部分要做的就是，拿到参数，再包裹

复制代码 
<?php 
    //header("Access-Control-Allow-Origin: *");
    //header("Access-Control-Allow-Origin: 我的域或ip");
    
    // 接收数据
     $jsoncallback = $_GET["jsoncallback"];

    // 构造数据
    for($i=1; $i<=5; $i++){ 
        $names[] = array("name" => "name" + $i);
    }

     $data = $jsoncallback . "(" . json_encode($names) . ")";
    
    //$data = json_encode($names);
    echo $data;
?>
复制代码

结果显示：

    

你可能会奇怪这一大串是什么，这其实是jq自动生成的一个函数名（也就是那个jsoncallback参数的值）

其实还有一种很常见的方式就是使用 $.getJson获取，直接给出一个网址

把$.ajax部分替换成$.getJson部分

$.getJSON('http://demoff.sinaapp.com/cross_domain.php?jsoncallback=?',function(data){ 
            addContents(data);
        });

jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。

我也可以指定那个值，因为我们目的是要运行addContents函数，那就可以直接指定为它。不过这时就不能使用$.getJson版的匿名函数了

直接再加个<script> 看看结果，数据返回后相应的函数就被调用执行。

<script type="text/javascript" src="http://demoff.sinaapp.com/cross_domain.php?jsoncallback=addContents"></script>

    

jsonp的方式很简便，它的缺点就是：

它只支持GET请求而不支持POST等其它类型的HTTP请求；

它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

 

 

　　第三： document.domain + iframe （iframe的使用主要是为了ajax通信）

不同的框架之间是可以获取window对象的，但却无法获取相应的属性和方法。

比如，有一个页面，它的地址是http://www.example.com/a.html ，

在这个页面里面有一个iframe，它的src是http://example.com/b.html,

很显然，这个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的东西的：

复制代码 
<script type="text/javascript">
    function test(){
        var iframe = document.getElementById('ifame');
        var win = document.contentWindow;//可以获取到iframe里的window对象，但该window对象的属性和方法几乎是不可用的
        var doc = win.document;//这里获取不到iframe里的document对象
        var name = win.name;//这里同样获取不到window对象的name属性
    }
</script>
<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>
复制代码

这个时候，document.domain就可以派上用场了，

我们只要把http://www.example.com/a.html 和http://example.com/b.html这两个页面的document.domain都设成相同的域名就可以了。

但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。

1.在页面 http://www.example.com/a.html 中设置document.domain:

复制代码 
<iframe id = "iframe" src="http://example.com/b.html" onload = "test()"></iframe>
<script type="text/javascript">
    document.domain = 'example.com';//设置成主域
    function test(){
        alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 对象
    }
</script>
复制代码

2.在页面 http://example.com/b.html 中也设置document.domain:

<script type="text/javascript">
    document.domain = 'example.com';//在iframe载入这个页面也设置document.domain，使之与主页面的document.domain相同
</script>

上述只谈到了，document.domain ，主要是为了不同域间访问数据操作数据。

如果想在

http://www.example.com/a.html

 页面中通过ajax直接请求下述的页面，可以用一个隐藏的iframe来做一个代理。

http://example.com/b.html

原理就是让这个iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面，所以这个iframe中的页面是可以正常使用ajax去获取你要的数据的，然后就是通过我们刚刚讲得修改document.domain的方法，让我们能通过js完全控制这个iframe，这样我们就可以让iframe去发送ajax请求，然后收到的数据我们也可以获得了。

 

　　第四： 使用window.name + iframe

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的.

（简单来看，window作为浏览器端的全局对象，默认可不加，所以 也可以简单地直接用name代替

  但name也不是简单地充当全局变量使用。所以要注意的是，只能使用name这个属性，使用诸如 window.name_1之类的是不行的

  我现在使用var name= 就隐式地声明window.name了）

比如现在有两个不同域的a.html和b.html

http://localhost:8080/demoff/a.html

<script type="text/javascript">
        var name = 'myNames';
        setTimeout(function(){ 
            location = 'http://demoff.sinaapp.com/b.html';
        },3000);
    </script>

http://demoff.sinaapp.com/b.html

<script type="text/javascript">
        alert(name);
    </script>

3秒后跳转过去可以看到 ：

数据是存在的，但实际情况中我们也不能这样跳来跳去，所以可以用隐藏的iframe来实现数据的获取

 

举个荔枝：

本地的为数据提供方：http://localhost:8080/demoff/b.html

远程的为数据需求方：http://demoff.sinaapp.com/b.html

则本地b.html文件：

<body>

    <script type="text/javascript">
        window.name = 'myName';
    </script>
</body>

远程b.html文件

复制代码 
<body>
    
    <!--  一个 iframe 作为中间件  -->
    <iframe id="myIframe" src="http://localhost:8080/demoff/a.html" style="display:none;" onload="getData()"></iframe>

    <script type="text/javascript">
        // 初始iframe加载后即执行
        function getData(){ 
            var myIframe = document.getElementById('myIframe');
            // 第一次iframe加载后即可拿到window.name值，然后设置其src为同域的文件（随意）
            myIframe.src = './index.php';
            // 设置好同域之后，就可以操作iframe的数据了，即可拿到该name值
            myIframe.onload = function(){ 
                var name = myIframe.contentWindow.name;
                alert(name);
            };
        }
    </script>
</body>
复制代码

即可拿到数据

 

 

　　第五：使用 window.postMessage方法

这个东西是HTML5引入的，可以在不同的window下传递数据，不受域的影响。目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持该方法。

window.postMessage(message,targetOrigin) 

调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；

第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 *  。

需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。

还是举个栗子：（假设现在是远程提供数据，本地获取数据）

远程b.html

复制代码 
<body>
    
    <!--  一个 iframe 作为中间件  -->
    <iframe id="myIframe" src="http://localhost:8080/demoff/a.html" style="display:none;" onload="setData()"></iframe>

    <script type="text/javascript">
        // 初始iframe加载后即执行
        function setData(){ 
            var myIframe = document.getElementById('myIframe');
            var win = myIframe.contentWindow;
            //win.postMessage('My name is null','*');
            win.postMessage('My name is null','http://localhost:8080/');
        }
    </script>
</body>
复制代码

本地b.html

复制代码 
<body>

    <script type="text/javascript">
        window.onmessage = function(e){ 
            e = e || window.event;
            alert(e.data);
        };
    </script>
</body>
复制代码

本地即可获取到数据

 

 

第六： 

除了上述常见的五种方法外，

还有flash方式的跨域，可参见

　　http://www.cnblogs.com/sevenyuan/archive/2009/11/19/1606237.html

　　http://www.2cto.com/Article/201108/100008.html

服务端也可以用一些代理的方式解决，可参见

　　http://blog.csdn.NET/macky0668/article/details/6247803

等

牛长犇
关注
专栏目录
如何在Vue项目中解决CORS跨域问题：全栈开发指南
小刘哥的博客
08-10 643
CORS（Cross-Origin Resource Sharing）是一种安全功能，它允许或拒绝Web应用从另一个与其不同源的域请求资源。如果没有适当的CORS设置，浏览器出于安全考虑将阻止前端代码访问不同源的后端服务。
解决JQurey跨域问题$.get|$.post|$.getJSON等等统统可跨域
04-11
解决JQurey跨域问题$.get|$.post|$.getJSON等等统统可跨域
JS跨域访问
04-20
NULL 博文链接：https://orange5458.iteye.com/blog/1901785
JS 跨域问题常见的五种解决方式
weixin_34419321的博客
08-27 913
一、什么是跨域？ 要理解跨域问题，就先理解好概念。跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合. URL 说明 是否允许通信 http://www.a.com/a.js h...
js 跨域问题解决方案
咖fei屋丶
03-14 393
1.建议方案： 在所有进行跨域访问的方法内加入 resp.setHeader("Access-Control-Allow-Origin", "*");//允许所有ip（域名）访问 2.jsonp  方案 ajax 请求： $.ajax({     url: 'xxxxx',     type: 'post',     dataType:'js
js跨域的几种解决方案
Elvis技术小屋
11-07 954
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: QQ截图20130613230631 要解决
js跨域及解决方案
我的E家
01-29 1930
1. 产生原因 浏览器同源策略限制，当前域名的js只能读取同域下的窗口属性。 一个网站的网址组成包括协议名，子域名，主域名，端口号。当在在页面中从一个url请求数据时，如果这个url的协议名、子域名、主域名、端口号任意一个有一个不同，就会产生跨域问题。 即使是在 http://localhost:80/ 页面请求 http://127.0.0.1:80/ 也会有跨域问题
java服务器端解决跨域问题共6页.pdf.zip
最新发布
11-21
Java服务器端解决跨域问题是一项常见的任务，尤其是在开发Web应用时。跨域是由于浏览器的安全策略，即同源策略（Same-Origin Policy）所引起的。同源策略限制了来自不同源的"文档"或脚本可以对另一个源的资源进行...
6种解决跨域的方案
03-17
JSONP是一种较旧的跨域解决方案，适用于支持JavaScript的浏览器。它利用HTML的`<script>`标签可以跨域加载资源的特性。服务器提供一个动态生成的JavaScript函数，将数据包裹在函数调用中返回，客户端预先定义好这个...
JSP使用ajaxFileUpload.js实现跨域问题.docx
01-20
为了解决这个问题，很多前端框架提供了相应的解决方案，如jQuery的`$.ajax`方法支持JSONP等方式来实现跨域请求。 本文主要介绍如何在JSP项目中使用`ajaxFileUpload.js`插件解决跨域文件上传的问题，并提供了一个...
跨域会话管理的挑战与解决方案
跨域会话管理是一种解决不同域名之间数据共享和状态保持的技术。当浏览器请求跨域资源时，由于浏览器的同源策略限制，无法直接访问对应域名的资源。跨域会话管理通过一些技术手段，使得不同域名之间可以共享用户的...
js解决跨域访问问题
11-09
js解决跨域访问问题，在用js访问web后台方法的时候，有时候会遇到跨域访问的问题。文档中介绍了跨域访问产生的原因以及相应的解决办法及代码示例。
js前端解决跨域问题的8种方案（最新最全）
10-21
本篇文章主要讲诉了前端跨域问题的几种解决方案，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
5种处理js跨域问题方法汇总
kingxuexi的博客
01-18 453
本文转自(http://www.jb51.net/article/58156.htm) 前两天碰到一个跨域问题的处理，使用jsonp可以解决。（http://www.jb51.net/article/57889.htm） 最近再整理了一下： 1.jsonp。    ajax请求，dataType为jsonp。这种形式需要请求在服务端调整为返回call
JS跨域问题解决方案
小锋QQmm~~的香蕉乐园
08-25 437
JS跨域问题有两个解决方案： 一、前端程序解决； 二、后端程序解决； 一、前端程序解决 缺点：只支持GET请求（假如前端强制使用POST，JSONP自动将参数转为GET） 前端如下： $.ajax({ url: "...", data: { id: 9 }, dataType: 'json', dataType: 'jsonp', jsonp: 'callback', jsonpCallback: 'data', succes
js解决跨域问题
小罗的博客
05-15 3241
一、同源策略 所谓同源策略，就是指两个页面具有相同的协议，主机（也常说域名），端口，三个要素缺一不可 二、什么是跨域 单地理解就是因为JavaScript同源策略的限制，一个域的页面去请求另一个域的资源，A域的页面去请求B域的资源。 三、解决跨域 1.Jsonp实现跨域 jsonp的原理：动态创建<script>标签，而<script>的src属性是没有跨域限制的 前端创建script标记，设置src，添加到head中（你可以往body中添加） 后台返回一个.
JS中的跨域问题及解决办法汇总
热门推荐
lareinalove的博客
11-16 4万+
一、什么是跨域？ 在了解跨域之前，首先要知道什么是同源策略（same-origin policy）。简单来讲同源策略就是浏览器为了保证用户信息的安全，防止恶意的网站窃取数据，禁止不同域之间的JS进行交互。对于浏览器而言只要域名、协议、端口其中一个不同就会引发同源策略，从而限制他们之间如下的交互行为： 1.Cookie、LocalStorage和IndexDB无法读取； 2.DOM无法获得； ...
JS 跨域问题
FireCode的博客
04-11 2665
官方文档介绍 一、简介 跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript 施加的安全限制。 同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；   跨源资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME（媒体类型）类型 的 POST 请求），浏览器必须首先使
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值