精华内容
下载资源
问答
  • 1、为什么会产生跨域 答:因为浏览器的同源政策,就会产生跨域。比如说发送的异步请求是不同的两个源,就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑,就会产生一个同源政策,...

    一、跨域

    1、为什么会产生跨域

    答:因为浏览器的同源政策,就会产生跨域。比如说发送的异步请求是不同的两个源,就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑,就会产生一个同源政策,不是同一个地方出来的是不允许进行交互的。

    2、怎么解决跨域

    解决跨域的方法:第一种jsonp的方法。第二种使用CORS解决跨域问题,即跨域资源共享,在后端设置响应头部,加一句代码:access-control-allow-origin:"*"或者允许交互的域名。第三种使用vue,找到config文件下->index.js文件,修改propyTable中的target的值,就可实现用前端解决跨域。第四种,使用代理;第五种,使用postmessage

    1、jsonp方法:

    jsonp是一种借助于 script 标签发送跨域请求的技巧方案。script的src属性可以访问网络上的资源,并script标签可以拿到响应体。

    <script>
        function test(json){
            console.log('我被调用了');
            console.log(json);
       }
    </srcipt>
    <script src="http://api.douban.com/v2/movie/top250?callback=test"></script>
    

    我们可以看到,我们预先定义了一个函数叫test,再然后在src里加了一个参数callback=test,可以发现,当请求完成,会自动调用test这个函数,并且把响应体(JSON数据)当做参数传递过来.实际上是浏览器用script的src去发起请求,并且传递一个参数叫callback=函数名,服务器接收到这个函数名,在返回的响应体里面调用这个函数,并且把json当做参数传递.
    注意:(1).Jsonp不是一套新技术,只是聪明的程序员想出的一套方案
    (2)能不能用这套方案,要看服务器端代码怎么写,服务器端如果写了调用函数的代码,那么就能支持JSONP方案.

    如果是在JQuery中使用Ajax,则只需要在dataType属性中把json改为jsonp即可;
    img

    2、后端处理跨域方法:使用cors解决跨域问题,即跨域资源共享,设置响应头。
    <?php 
        $json = array("name"=>"jack","age"=>16);
        //代表告诉浏览器,我允许任意域名访问我这个接口
        //如果写一个*,代表所有域名都可以来访问我
        // header('Access-Control-Allow-Origin: *');
        //如果写的是指定域名,代表只有这个域名可以访问
        header('Access-Control-Allow-Origin: *');
        echo json_encode($json);
    ?>
    
    3、前端跨域方法:使用vue

    找到config文件下->index.js文件,修改propyTable中的target的值。

    proxyTable: {/api”: {
    target: “http://localhost:8080,
    changeOrigin: true,
    pathRewrite: {^/api’: ‘’
    }
    }
    }
    
    4、iframe嵌套通讯,postmessage

    HTML5引入了一个全新的API:跨文档通信 API(Cross-document messaging)。这个API为window对象新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源。

    本文部分参考:https://blog.csdn.net/sinat_28296757/article/details/80771082

    展开全文
  • 为什么会产生跨域问题?

    万次阅读 2018-02-27 14:35:56
    1、浏览器限制2、跨域(域名,端口不一样都是跨域)3、XHR(XMLHttpRequest请求)同时满足三个条件才有可能产生跨域问题。解决跨域问题方案。1,从浏览器出发,允许浏览器跨域。2,从XHR(XMLHttpRequest)出发 (1...

    1、浏览器限制

    2、跨域(域名,端口不一样都是跨域)

    3、XHR(XMLHttpRequest请求)

    同时满足三个条件才有可能产生跨域问题。

    解决跨域问题方案。

    1,从浏览器出发,允许浏览器跨域。

    2,从XHR(XMLHttpRequest)出发

        (1)避免发生跨域。使用jsonp,由于jsonp请求是通过script的方式发送的(只有xhr的请求方式才有可能产生跨域问题),所以不会产生跨域问题。Spring MVC实现过程:前台使用ajax的get请求,将dataType设为“jsonp”;服务器创建一个类并继承抽象类AbstractJsonReponseBodyAdvice,最后注解@ControllerAdivece。使用jsonp的弊端,只能使用get方式请求,服务器需要改动代码,发送的不是xhr请求。

        (2)产生跨域后解决。

                从被调用方考虑,有三种情况,分别是服务器实现,nginx配置和apache配置。

                服务器实现需要注意两种情况,简单请求和非简单请求。简单请求是先执行请求再验证,非简单请求是先验证再请求。

              简单请求(比较常见):方法为get,head,post,请求header里面没有自定义头,Content-Type的值为以下几种 text/plain,multipart/form-data,application/x-www-form-urlencoded。

                非简单请求(比较常见):put,delect方法的ajax请求,发送json格式的ajax请求,带自定义头的ajax请求。

                简单请求处理方案:在响应头中添加

                    Access-Control-Allow-Origin=“允许跨域的url”,即跨省域时,请求头Origin的值,所以一般是获取Origin的值。

                    Access-Control-Allow-Method=“*”,允许的方法。

                非简单请求处理方案:在相应头中添加

                    Access-Control-Allow-Origin=“允许跨域的url”,即跨域时,可以获取请求头Origin的值。

                    Access-Control-Allow-Method=“*”,允许的方法

                    Access-Control-Request-Headers=“Content-Type,自定义的header的key”。

                 带cookies的跨域解决:在响应头添加

                    Access-Control-Allow-Credentials,="true",允许使用cookies

                   ngnix配置:


    apache配置:没搞过

    若是使用spring框架:使用@CrossOrigin注解既可以实现服务端跨域

                        

        

    展开全文
  • 之前面试官基本都是问如何解决跨域问题,今天遇到一个公司问什么是跨域,为什么会产生跨域问题,虽然之前看过相关的问题,但是突然感觉有点蒙,自我感觉回答的不是很全面和准确,所以啊,看问题还真是得知其然并知其...

       之前面试官基本都是问如何解决跨域问题,今天遇到一个公司问什么是跨域,为什么会产生跨域问题,虽然之前看过相关的问题,但是突然感觉有点蒙,自我感觉回答的不是很全面和准确,所以啊,看问题还真是得知其然并知其所以然,今天算重新加深一下对跨域的理解!

    首先为何会产生跨域?

    跨域问题是因为浏览器的同源策略引起的,一种浏览器的安全机制,要求协议,域名,端口,都要一致!

    贴(tou)张图,一目了然,?

    如何解决跨域?

    1. jsonp,只支持get,不支持post,需要调用前端和被调用后端配合(比较常用)
    2. 后端HttpClient进行转发,两次请求,效率低,安全(类似Nginx反向代理)
    3. 服务端设置响应头,允许跨域,适于小公司快速解决问题
    4. Nginx搭建API接口网关
    5. Zuul搭建API接口网关

    后四种都属于服务端设置,对于目前还是一个纯前端的我来说,先把前端的搞懂再说,所以在此只说前端的jsonp

    • jsonp:原理我在面试题总结那篇文章中说过,在此只贴代码

    $(".btn").click(function(){
        //向头部输入一个脚本,该脚本发起一个跨域请求
        $("head").append("<script src='http://localhost:9090/student?callback=getData'><\/script>");
    })
    //后端获取callback参数的值getData,并以getData为函数名将数据以参数的形式返回
    
    function getData(result){//前端获取服务端返回数据
        console.log(result)
    }
    

     

    展开全文
  • 为什么会跨域这个名词的出现呢? 跨域又是什么呢?为何要跨域? 浏览器的同源策略又是什么?怎么解决? jsonp又是什么? 跨域的原理又是什么呢? 名词解释: 1、什么是跨域跨域产生来源于现代浏览器所通用...

    首先我们来想一想

                  为什么会有跨域这个名词的出现呢?

                  跨域又是什么呢?为何要跨域?

                  浏览器的同源策略又是什么?怎么解决?

                  jsonp又是什么?

                  跨域的原理又是什么呢?

    名词解释:

     

    1、什么是跨域
    跨域的产生来源于现代浏览器所通用的‘同源策略’,所谓同源策略,是指只有在地址的:
    1. 协议名 https,http
    2. 域名 http://a.study.cn http://study.cn
    3. 端口名 http://study.cn:8080/json/jsonp/jsonp.html study.cn/json/jsonp/jsonp.html
    均一样的情况下,才允许访问相同的cookie、localStorage或是发送Ajax请求等等。若在不同源的情况下访问,就称为跨域。

    例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.

     

    同源策略:

    请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

    比如:我在本地上的域名是study.cn,请求另外一个域名一段数据

    这个时候在浏览器上会报错:

    这个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险~

     请求地址				        形式			 结果
     http://study.cn/test/a.html			同一域名,不同文件夹	 成功
     http://study.cn/json/jsonp/jsonp.html		同一域名,统一文件夹	 成功
     http://a.study.cn/json/jsonp/jsonp.html	不同域名,文件路径相同	 失败
     http://study.cn:8080/json/jsonp/jsonp.html	同一域名,不同端口	 	 失败
     https://study.cn/json/jsonp/jsonp.html		同一域名,不同协议  	 失败
    

     

    jsonp:

    jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议。

    一个是描述信息的格式,一个是信息传递双方约定的方法。

    jsonp的产生:

    1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.

    2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候

    3.凡是拥有scr这个属性的标签都可以跨域例如<script><img><iframe>

    4.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.

    5.而json又是一个轻量级的数据格式,还被js原生支持

    6.为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback 参数给服务端,

    demo1:基于script标签实现跨域

    举个例子:我在http://study.cn/json/jsonp/jsonp_2.html下请求一个远程的js文件

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    
    <script type="text/javascript">
        var message = function(data) {
            alert(data[1].title);
        };
    </script>
    
    <script type="text/javascript" src="http://web.cn/js/message.js"></script>
    </head>
    <body>
    <div id='testdiv'></div>
    </body>
    </html>
    

      

    远程的message.js文件是

    message([
         {"id":"1", "title":"天津新闻联播,雷人搞笑的男主持人"},
         {"id":"2", "title":"楼市告别富得流油 专家:房价下跌是大概率事件"},
         {"id":"3", "title":"法国人关注时事 八成年轻人每天阅读新闻"},
         {"id":"4", "title":"新闻中的历史,历史中的新闻"},
         {"id":"5", "title":"东阳新闻20140222"},
         {"id":"6", "title":"23个职能部门要增加新闻发布频次"},
         {"id":"7", "title":"《贵州新闻联播》 中国美丽乡村"},
         {"id":"8", "title":"朝韩离散家属团聚首轮活动结束"},
         {"id":"9", "title":"索契冬奥会一天曝出两例兴奋剂事件"},
         {"id":"10", "title":"今天中国多地仍将出现中度霾"}
     ]);

     

    这个时候我们得到的相应头是:

    这样就实现跨域成功了,因为服务端返回数据时会将这个callback参数(message)作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

    demo2: 基于script标签实现跨域

    让远程js知道它应该调用的本地函数叫什么名字,只要服务端提供的js脚本是动态生成的就好了,这样前台只需要传一个callback参数过去告诉服务端,我需要XXX代码,于是服务端就会得到相应了.

    例如 在http://study.cn/json/jsonp/jsonp_3.html页面请求 http://192.168.31.137/train/test/jsonpthree

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    
    <script type="text/javascript">
        var messagetow = function(data){
            alert(data);
        };
        var url = "http://192.168.31.137/train/test/jsonpthree?callback=messagetow";
        var script = document.createElement('script'); 
        script.setAttribute('src', url); 
        document.getElementsByTagName('head')[0].appendChild(script);
    </script>
    </head>
    <body>
    </body>
    </html>
    

      

    得到的响应头是:

    demo3:  基于jquery跨域

    那么如何用jquery来实现我们的跨域呢???jquery已经把跨域封装到ajax上了,而且封装得非常的好,使用起来也特别方便

    如果是一般的ajax请求:

    $.ajax({
            url:'http://192.168.31.137/train/test/testjsonp',
            type : 'get',
            dataType : 'text',
            success:function(data){
                alert(data);
            },
            error:function(data){
                alert(2);
            }        
        });
    

      

    那么在浏览器中会报错:

     

    jsonp形式的ajax请求:并且通过get请求的方式传入参数,注意:跨域请求是只能是get请求不能使用post请求

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="./js/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var name = 'chenshishuo';
        var sex = 'man';
        var address = 'shenzhen';
        var looks = 'handsome ';
         $.ajax({
             type : 'get',
             url:'http://192.168.31.137/train/test/testjsonp',
            data : {
                name : name,
                sex : sex,
                address : address,
                looks : looks,
            },
            cache :false,
            jsonp: "callback",
            jsonpCallback:"success",
            dataType : 'jsonp',
            success:function(data){
                alert(data);
            },
            error:function(data){
                alert('error');
            }        
        });
    });
    </script>
    </head>
    <body>
    <input id='inputtest' value='546' name='inputtest'>
    <div id='testdiv'></div>
    </body>
    </html>
    

      

    jsonp 传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
    jsonpCallback 自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名

    看看请求头和相应头吧

    请求头:jquery会自动带入callback参数,当服务端获取到这个参数后,返回回来.(响应头)

    现在是不是明白了跨域的基本原理,和基本的使用方法呢??

    上面我们说到img中的src可以自动调用远程图片的(这个比较简单我在这里就不说了)

    还有ifram请求:

    基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com 这种特点,

    也就是两个页面必须属于一个基础域(例如都是xxx.com),使用同一协议和同一端口,这样在两个页面中同时添加document.domain,就可以实现父页面调用子页面的函数

    要点就是 :通过修改document.domain来跨子域

    demo4: 通过iframe来跨子域

    http://a.study.cn/a.html 请求 http://b.study.cn/b.html

    在a.html:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
            <script type="text/javascript">
                document.domain = 'study.cn';
                function test() {
                    alert(document.getElementById('a').contentWindow);
                }
            </script>
    </head>
    <body>
        <iframe id='a' src='http://b.study.cn/b.html' οnlοad='test()'>
    </body>
    </html>
    

      

     在b.html:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    
    <script type="text/javascript">
    document.domain = 'study.cn';
    </script>
    </head>
    <body>
        我是b.study.cn的body
    </body>
    </html>
    

      

    运行效果截图:

    我们就可以通过js访问到iframe中的各种属性和对象了

    如果你想在http://a.study.cn/a.html页面中通过ajax直接请求页面http://b.study.cn/b.html,即使你设置了相同的document.domain也还是不行的.

    所以修改document.domain的方法只适用于不同子域的框架(父类与子类)间的交互。

    如果想通过使用ajax的方法去与不同子域间的数据交互或者是js调用,只有两种方法,一种是使用jsonp的方法外,还有一种是使用iframe来做一个代理。

    原理就是让这个 iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面,所以这个iframe中的页面是可以正常使用ajax去获取你要的数据 的,

    然后就是通过我们刚刚讲得修改document.domain的方法,让我们能通过js完全控制这个iframe,这样我们就可以让iframe去发 送ajax请求,然后收到的数据我们也可以获得了。

     

    转载于:https://www.cnblogs.com/liubingyjui/p/10804785.html

    展开全文
  • 浏览器的跨域问题以及解决方案 浅谈CSRF攻击方式 参考了上面的大神们的文章,以下是自己的总结。 1、什么是跨域 跨域产生来源于现代浏览器所通用的‘同源策略’,所谓同源策略,是指只有在地址...2、为什么浏...
  • 跨域问题产生的原因?

    千次阅读 2018-12-29 17:45:37
    1.为什么会产生跨域问题? JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象,即同源政策。通俗的讲,为了安全所以浏览器进行了限制,所以不能进行跨域。 2.什么是跨域的问题? 浏览器从一个域名的...
  • 跨域问题

    2018-07-30 18:33:36
    什么是跨域问题: 1、前端调用后端接口时,如果不在...为什么会产生跨域问题: 1、浏览器的限制:浏览器考虑到安全问题,当浏览器发现发出的是跨域请求时,会进行校验,校验不通过就会报跨域问题。 2、发出的请求...
  • ajax跨域

    2018-07-10 09:34:03
    为什么会产生跨域? 答:前端调用后台服务接口的时候,接口不在同域名下便产生了跨域的问题。跨域的三大要素是浏览器的限制、跨域、XHR(XHRHttpRequest)请求,缺一不可,也就是说破坏其中一个因素就可以成功访问...
  • 跨域问题详解

    2019-11-12 10:28:50
    1.为什么会产生跨域问题 之所以会产生跨域问题是由于浏览器实现了同源策略(Same origin policy),同源策略规定发起ajax请求时当原地址(原始域)和请求地址(请求域)的协议、域名、端口号三者任意一个不同就会...
  • [跨域]跨域原理解析

    2019-10-07 14:21:27
    为什么会产生跨域:  因为同源策略的安全机制。为了站点的安全,同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。 同源的定义  如果...
  • # 为什么会产生跨域问题浏览器限制,目前所有浏览器都实现了同源策略规范。请求方式Type为xhr。如果非xhr,如json,script则也不会存在跨域问题请求方与服务方的源不同,即跨域,包括:协议不同域名不同端口不同同时...
  • # 为什么会产生跨域问题浏览器限制,目前所有浏览器都实现了同源策略规范。请求方式Type为xhr。如果非xhr,如json,script则也不会存在跨域问题请求方与服务方的源不同,即跨域,包括:协议不同域名不同端口不同同时...
  • 前端与后端非同源就会产生跨域问题(浏览器默会拦截掉非同源请求)。 什么是非同源? 前端的地址与前端即将请求的后端接口地址有以下的区别就视非同源: 协议不同 域名不同 端口不同 例如我前端的地址是:...
  • 前端的跨域问题

    2019-12-10 15:59:05
    #1为什么会产生跨域问题?为什么要解决跨域问题?怎么解决? 因为浏览器的同源策略,导致发起请求的前端的地址,和后台接口地址,必须协议域名以及端口都是一致,这样才不会产生跨域问题 很多的项目是前后端分离的,...
  • Java - 探究前后分离带来的跨域问题

    千次阅读 2021-02-12 14:19:52
    文章目录为什么会产生跨域问题同源策略 为什么会产生跨域问题 1995年,Netscape 公司出于安全的考虑在浏览器中引入了“同源策略”。 同源策略 浏览器端对请求的处理中,如果两个 URL 的协议、域名和端口都相同,...
  • PHP解决跨域

    2019-09-29 09:56:41
    说到跨域,首先要说到为什么会产生跨域问题 “当前端页面与后台运行在不同的服务器时 或者不在同一个域名下时,就必定会出现跨域这一问题”,那么php想解决跨域问题的话,需要加几类操作如 header('Content-Type: ...
  • 跨域解决方案详解

    2020-06-01 16:39:58
    2.为什么会产生跨域? 当同时满足“浏览器限制”、“跨域”、“XHR(XmlHttpRequest)请求”三个条件时,才会发生跨域问题。 3.跨域问题解决方案: 3.1.前端修改 3.1.1.浏览器命令行启动,关闭跨域校验:–disable-web...
  • 跨域

    2021-01-31 23:20:09
    一、为什么会出现跨域问题 跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。 同源策略:是指协议,域名,端口都要相同,其中有一个不同都会产生跨域...
  • 了解前端跨域知识

    2020-05-17 23:03:18
    2. 为什么会产生跨域? 因为浏览器的同源策略(Same Origin Policy),对 JavaScript 实施了安全限制。非同一域名、协议、端口的请求,是不被浏览器允许的(浏览器会将该请求返回的响应内容拦截,并给出跨域警告...
  • 浅谈nodejs的跨域

    2020-02-23 21:42:01
    在谈跨域的解决方法前,首先了解什么是跨域,为什么会产生跨域。 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。而产生跨域问题是由于浏览器的同源策略限制。同源策略是浏览器最核心...
  • Jsonp跨域问题的详解

    2019-05-09 15:39:39
    在解决问题之前,我们需要知道什么是跨域,为什么会产生跨域 跨域: 跨域种类: 1.域名不同 2.域名相同,端口不同 3.ip不同 4.ip不同,端口不同 跨域源自js的安全机制 跨域例子: Access to ...
  • 关于ajax跨域问题

    2016-09-04 10:08:10
    有两个页面,第一个页面是功能是跳转,第二个页面的功能是请求数据并响应,正常来看这个流程是没问题的,但是当第二个页面加载数据却加载不出来,经过调试发现是跨域的问题,最终得以解决,那么为什么会产生跨域问题...
  • ajax跨域问题

    2018-05-11 21:25:57
    为什么会产生跨域问题? 1.浏览器限制 2.请求是跨域的 3.XHR(XMLHttpResquest)请求 jsonp是动态创建script的标签,返回的是js代码,如果服务器没有做任何改动,服务器返回的是json对象,所以浏览器把json对象...
  • 为什么会出现跨域 浏览器为了保护用户, 保证用户安全,使用同源策略 来针对请求做出响应。 同源: 协议相同:protocol(ftp file http https 等协议)不同得协议被服务器认为不同源 域名相同:domain网站得...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 178
精华内容 71
关键字:

为什么会产生跨域