精华内容
参与话题
问答
  • JS跨域

    2018-06-13 21:16:09
    JS跨域方法和原理JS跨域是指JS在不同的域之间进行数据传输和通信1.通过jasonp跨域JS中,不能直接用XMLHttpRequest请求不同域上的数据时,但可以在页面上引入不同域上的JS脚本文件,jsonp利用该特性实现。原理:通过...

    JS跨域方法和原理

    JS跨域是指JS在不同的域之间进行数据传输和通信

    1.通过jasonp跨域

    JS中,不能直接用XMLHttpRequest请求不同域上的数据时,但可以在页面上引入不同域上的JS脚本文件,jsonp利用该特性实现。

    原理:通过script标签引入一个js文件,该文件载入成功后会执行我们在url参数中指定的函数,并把我们需要的jason数据作为参数传入。jasonp需要服务器端的页面进行相应配合。

    2.CORS请求原理

    CORS是个W3C标准,全称是跨域资源共享。它允许浏览器向跨域服务器发出XMLHttpRequest请求,从而克服了ajax只能同源使用的限制。

    第一种现象:no'Access-Control-Allow-Origin'header is present on the requested resource,且the response had HTTP staus code 404。

    原因:本次ajax请求是"非简单请求",所以请求前会发送一次预检请求(options)

    服务器后端接口没有允许options请求,导致无法找到对应接口地址

    解决方案:后端允许options请求

    第二种现象:no'Access-Control-Allow-Origin'header is present on the requested resource,且the response had HTTP staus code 405。

    原因:与第一种现象有区别,后台方法允许options请求,但一些配置文件中(如安全配置)阻止了options请求,导致该现象

    解决方案:后端关闭相应的安全配置

    第三种现象:no'Access-Control-Allow-Origin'header is present on the requested resource,且the response had HTTP staus code 200。

    原因:origin头部检查不匹配,或缺少一些头部文件(如X-Requested-With头部),然后服务器端会将response返回给前端,前端检测到时触发XHR.onerror,导致前端控制台报错。

    解决方案:后端增加相应头部支持

    第四种现象:header contains multiple values'*,*'

    原因:后台响应的http头部信息有两个Access-Control-Allow-Origin:*

    解决方案:建议删除代码中手动添加的*,只用项目配置中的即可


    展开全文
  • js跨域

    2019-03-19 21:11:19
    三种方法实现js跨域访问1.基于iframe实现跨域2.基于script标签实现跨域3.后台代理方式 一、什么是跨域? 1.定义:跨域是指从一个域名的网页去请求另一个域名的资源。但是一般情况下不能这么做,它是由浏览器的同源...

    一、什么是跨域?

    1.定义:跨域是指从一个域名的网页去请求另一个域名的资源。但是一般情况下不能这么做,它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域。

    同源是指,域名,协议,端口均相同。这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。

    对于端口和协议的不同,只能通过后台来解决。

    二、为什么浏览器要限制跨域访问呢?

    安全问题:如果一个网页可以随意地访问另外一个网站的资源,那么就有可能在客户完全不知情的情况下出现安全问题。比如下面的操作就有安全问题:

    1. 用户访问www.mybank.com ,登陆并进行网银操作,这时cookie啥的都生成并存放在浏览器
    2. 用户突然想起件事,并迷迷糊糊地访问了一个邪恶的网站 www.xiee.com
    3. 这时该网站就可以在它的页面中,拿到银行的cookie,比如用户名,登陆token等,然后发起对www.mybank.com 的操作。
    4. 如果这时浏览器不予限制,并且银行也没有做响应的安全处理的话,那么用户的信息有可能就这么泄露了。

    三、为什么要跨域?

    既然有安全问题,那为什么又要跨域呢? 有时公司内部有多个不同的子域,比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域。

    三种方法实现js跨域访问

    javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法:

    1.基于iframe实现跨域

     基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实现父页面调用子页面的函数,代码如下: 
    

    页面一:

    <html>  
    <head>  
      <script>  
       document.domain = "xx.com";  
        function a(){  
          alert("a");  
       }  
      </script>  
    </head>  
    <body>  
       <iframe src="http://localhost:8080/CmsUI/2.html" id="i">  
         
       </iframe>  
       <script>  
      document.getElementById('i').onload = function(){  
         var d = document.getElementById('i').contentWindow;  
         d.aa();  
           
     };  
       </script>  
     </body>  
    </html>  
    

    页面二:

    <html>  
     <head>  
      <script>  
        document.domain = "xx.com";  
        function aa(){  
        alert("a");  
         }  
      </script>  
     </head>  
     <body>  
     </body>  
    </html>  
    

    这时候父页面就可以调用子页面的aa函数,实现js跨域访问

    2.基于script标签实现跨域

    script标签本身就可以访问其它域的资源,不受浏览器同源策略的限制,可以通过在页面动态创建script标签,代码如下:

     var script = document.createElement('script');  
        script.src = "http://aa.xx.com/js/*.js";  
        document.body.appendChild(script);  
    

    这样通过动态创建script标签就可以加载其它域的js文件,然后通过本页面就可以调用加载后js文件的函数,这样做的缺陷就是不能加载其它域的文档,只能是js文件,jsonp便是通过这种方式实现的,jsonp通过向其它域传入一个callback参数,通过其他域的后台将callback参数值和json串包装成javascript函数返回,因为是通过script标签发出的请求,浏览器会将返回来的字符串按照javascript进行解析执行,实现了域与域之间的数据传输。
    jquery中对jsonp的支持也是基于此方案。

    3.后台代理方式

    这种方式可以解决所有跨域问题,也就是将后台作为代理,每次对其它域的请求转交给本域的后台,本域的后台通过模拟http请求去访问其它域,再将返回的结果返回给前台,这样做的好处是,无论访问的是文档,还是js文件都可以实现跨域

    展开全文
  • JS 跨域

    2015-04-11 17:21:31
    1. 什么是JS跨域 JS对象只能访问与包含它的页面位于同一个域中的资源。如图: from:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html 2. JS跨域会带来安全隐患,如CSRF, XSS 3. ...

    1. 什么是JS跨域

    JS对象只能访问与包含它的页面位于同一个域中的资源。如图:


    from:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html


    2. JS跨域会带来安全隐患,如CSRF, XSS


    3. CSRF(cross site request forgery)跨站,请求伪造攻击,攻击实例如下图:


    4. xss(cross site scripting)攻击, 



    展开全文
  • js 跨域

    2011-11-23 17:20:32
    在使用iframe来开发嵌套网页的web站点时,js跨域调用是个头疼的问题。一方面,浏览器说这不安全,不让你调用;另一方面,开发者说我们要交互,必须要调用。作者是个开发者,必须从开发者的需求出发,解决js跨域调用...
     在使用iframe来开发嵌套网页的web站点时,js跨域调用是个头疼的问题。一方面,浏览器说这不安全,不让你调用;另一方面,开发者说我们要交互,必须要调用。作者是个开发者,必须从开发者的需求出发,解决js跨域调用问题。在这里总结下js跨域调用的各种方法,并将目前项目所使用的方案分享给大家。
    

    1.降低浏览器安全级别。。。。。。。。。。。。。。。是的,非常不实际。

    2.设置域名。适用于子域名相同的页面。例如父页面域名为xxx.a.com,子页面域名为yyy.a.com,二级域名是相同的,可以通过脚本设置两个页面的域名都为a.com来进行互相调用,该方法非常简单,js代码如下:
    1. document.domain='a.com';  
    document.domain='a.com';
    该方法的缺陷是明显的,首先两个域名必须有子域名相同,其次如果使用ajax,当在yyy.a.com更改域名为a.com后,ajax请求返回的数据域名也变回了yyy.a.com,某些浏览器也会因安全问题阻止ajax解析。

    3.设置hash值。例如url为"xxx.a.com#test",hash值为test。更改hash值不会导致页面刷新,所以js可以通过设置和监听hash来进行通信调用。
        这方法缺点也是很明显的,首先hash在网页设计中常用作为锚点,如果页面本身需要锚点,那么使用hash传递消息会很混乱;其次hash的改变没有相应的事件,所以监听hash需要使用定时器来定时检测;还有hash值是直接暴露在浏览器地址栏中的,也就是顶级窗口的hash消息将是暴露的,不安全。

    4.网站代理。所有iframe页面(包括顶级页面)都通过同一个网站来代理请求,可以直接使用顶级窗口来当代理。例如顶级窗口xxx.a.com中嵌套页面yyy.b.com,原先的iframe标签是这样写的
    1. <iframe src='http://yyy.b.com'></iframe>  
    <iframe src='http://yyy.b.com'></iframe>
    使用顶级窗口的站点xxx.a.com作为代理时,需要这样写
    1. <iframe src='http://xxx.a.com/proxy?url=yyy.b.com'></iframe>  
    <iframe src='http://xxx.a.com/proxy?url=yyy.b.com'></iframe>
    这样一下就没有跨域问题了,全都是同一个域名!
        嗯,缺点还是要说的,如果yyy.b.com需要请求其他资源,例如js、图片、表单提交等,如果请求的链接写的是相对路径,请求将发给xxx.a.com,而不是yyy.b.com。

    5.动态脚本。例如顶级页面xxx.a.com中定义了一个函数haha(),yyy.b.com需要调用该函数,那么yyy.b.com这个页面可以通过创建域名为xxx.a.com的iframe,通过新建的iframe来请求调用haha(),如下代码
    1. <iframe src='http://xxx.a.com/dynamicJs/a'></iframe>  
    <iframe src='http://xxx.a.com/dynamicJs/a'></iframe>
    该iframe的内容如下
    1. <script type='text/javascript'>   
    2. top.haha();   
    3. </script>  
    <script type='text/javascript'>
    top.haha();
    </script>
    其中的top变量直接指向了顶级页面,也就是xxx.a.com,由于新建的iframe的域名与顶级域名一致,所以是可以直接调用haha函数滴!
        缺点。因为要通过http请求来调用脚本,网络较差时,实时性很差!

    6.postMessage。消息传递机制,这是HTML5的内容(不要以为HTML5离咱们多远。IE8以上、chrome3以上、firefox3以上都是支持该机制滴)。先说明下该函数,函数用于页面间传递消息,原型为
    1. otherWindow.postMessage(message, targetOrigin);  
    otherWindow.postMessage(message, targetOrigin);
    otherWindow是接收信息的window对象,可以是iframe的contentWindow,top变量、parent变量、frames['frameId']变量等;message是要传递的消息;targetOrigin是对otherWindow变量的限制条件,例如,'*'表示不作限制,'http://xxx.a.com'表示otherWindow必须是xxx.a.com域名下。
        发送信息的窗口使用postMessage来发送信息。对于接收信息的窗口,分浏览器不同监听的事件也不同,接受信息的代码如下例子
    1. if(window.attachEvent){ //IE浏览器   
    2.     window.attachEvent('onmessage'function(event) {   
    3.         alert(event.data);   
    4.     });   
    5. else { //firefox和chrome   
    6.     window.addEventListener('message'function(event){   
    7.         alert(event.data);   
    8.     }, false)   
    9. }  
    if(window.attachEvent){ //IE浏览器
        window.attachEvent('onmessage', function(event) {
            alert(event.data);
        });
    } else { //firefox和chrome
        window.addEventListener('message', function(event){
            alert(event.data);
        }, false)
    }
    呃。。。缺点还是得说的,由于存在庞大的IE6与IE7用户,该方法的浏览器兼容很糟糕。

    7.这是5与6的结合,也是目前作者所参与项目所使用的方案。判断浏览器是否支持消息传递机制,支持的话使用消息传递,否则使用动态脚本。附件为该方法的一个demo,outer.html为顶级页面,inner.html为子页面,proxy.php为动态脚本(在使用消息传递时不会使用到),该demo演示了通过点击顶级页面outer.html的按钮后,调用inner.html中的函数。
    展开全文
  • JS跨域总结

    2020-10-27 23:33:23
    JS跨域总结,主要是解决js中跨域访问的我问题
  • Js 跨域

    2013-02-16 15:20:19
    一、一些概念 ①传统Ajax:交互的数据格式——自定义字符串或XML描述...基于纯文本、被原生JS支持。  格式:两种数据类型描述符:大括号{ }、方括号[ ]。分隔符逗号、映射符冒号、定义符双引好。 ④JSONP:
  • js跨域调用

    2016-11-19 00:24:05
    本实例是JS跨域调用webservice!
  • 正常使用AJAX会需要正常考虑跨域问题,所以伟大的程序员们又折腾出了一系列跨域问题的解决方案,如JSONP、flash、ifame、xhr2等等。本文给大家介绍JS跨域解决方案之使用CORS实现跨域,感兴趣的朋友参考下吧
  • 使用js跨域交互案例

    2017-12-25 15:34:22
    使用js跨域交互案例,两个页面简单明了。使用js跨域交互案例,两个页面简单明了。
  • js跨域以及解决跨域

    2017-10-16 11:49:59
    js跨域 :jsonp跨域 getJSON()方法跨域 动态添加script标签跨域
  • js跨域问题

    2019-03-29 16:20:10
    js跨域问题总结
  • arcgis js跨域解决策略

    2018-08-12 13:35:00
    能够完美解决arcgis js跨域解决问题,该文档详细说明了.NET或者java环境下跨域解决

空空如也

1 2 3 4 5 ... 20
收藏数 13,315
精华内容 5,326
关键字:

js跨域