精华内容
参与话题
问答
我要提问

  • 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.定义：跨域是指从一个域名的网页去请求另一个域名的资源。但是一般情况下不能这么做，它是由浏览器的同源... 
    javascript的跨域问题
    

    一、什么是跨域？
    

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

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

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

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

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

      

    1. 用户访问www.mybank.com  ，登陆并进行网银操作，这时cookie啥的都生成并存放在浏览器
      2. 

    2. 用户突然想起件事，并迷迷糊糊地访问了一个邪恶的网站 www.xiee.com
      3. 

    3. 这时该网站就可以在它的页面中，拿到银行的cookie，比如用户名，登陆token等，然后发起对www.mybank.com 的操作。
      4. 

    4. 如果这时浏览器不予限制，并且银行也没有做响应的安全处理的话，那么用户的信息有可能就这么泄露了。
      5. 

    

    三、为什么要跨域？
    

    既然有安全问题，那为什么又要跨域呢？ 有时公司内部有多个不同的子域，比如一个是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中的函数。
    收起
    展开全文
    iframe 浏览器 function ajax

  • 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！
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    JS跨域解决方案之使用CORS实现跨域
    
                                    
                                2020-10-22 13:35:22
                            
    
                            
    
                                
    
                                    正常使用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标签跨域
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        ajax   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    js跨域问题
    
                                    
                                2019-03-29 16:20:10
                            
    
                            
    
                                
    
                                    js跨域问题总结  
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        JSONP   
                                        Core   
                                
    

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

                        
    • 
                

            


            

                
            

            

                

                

                    
                    
空空如也

                

            


            

                


 

 
 
         

            
                     


                    
                        1 
                    
                    
                        2 
                    
                    
                        3 
                    
                    
                        4 
                    
                    
                        5 
                    
                        ... 
                    
                        20 
                    

                    
            
        

   

                

                

            


        

    

    

        

            

                收藏数
                    13,315
            

            

                精华内容
                    5,326
            

        

        

            
热门标签

            
        


        


        

            关键字：
js跨域