中国电科旗下高技能it教育培训机构

从前端和后端两个角度分析jsonp跨域访问 -皇冠盘网址

400-9988-316

从前端和后端两个角度分析jsonp跨域访问

发布时间:2021-01-28浏览量:379次

一、什么是跨域访问

举个栗子:在a网站中,我们希望使用ajax来获得b网站中的特定内容。如果a网站与b网站不在同一个域中,那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的。

总而言之,同源策略规定,浏览器的ajax只能访问跟它的html页面同源(相同域名或ip)的资源。

二、什么是jsonpjsonp(json with padding)是json的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。

由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 html 的元素是一个例外。利用元素的这个开放策略,网页可以得到从其他来源动态产生的 json 资料,而这种使用模式就是所谓的 jsonp。用 jsonp 抓到的资料并不是 json,而是任意的javascript,用 javascript 直译器执行而不是用 json 解析器解析。更具体的原理需要更多篇幅的讲解,小伙伴可以自行去百度。

三、jsonp的使用前端的使用示例

jquery ajax对jsonp进行了很好的封装,我们使用起来很方便。前端示例:

 $.ajax({

            type:"get",

            url:"http://www.deardull.com:9090/getmyseat", //访问的链接

            datatype:"jsonp",  //数据格式设置为jsonp

            jsonp:"callback",  //jquery生成验证参数的名称

            success:function(data){  //成功的回调函数

                alert(data);

            },

            error: function (e) {

                alert("error");

            }

        });

需要注意的地方是:

datatype,该参数必须要设置成jsonp

jsonp,该参数的值需要与服务器端约定,详细情况下面介绍。(约定俗成的默认值为callback)

后端的配合示例jquery ajax jsonp原理

后端要配合使用jsonp,那么首先得了解jquery ajax jsonp的一个特点: 

jquery在发送一个ajax jsonp请求时,会在访问链接的后面自动加上一个验证参数,这个参数是jquery随机生成的. 

添加这个参数的目的是唯一标识这次请求。当服务器端接收到该请求时,需要将该参数的值与实际要返回的json值进行构造(如何构造下面讲解),并且返回,而前端会验证这个参数,如果是它之前发出的参数,那么就会接收并解析数据,如果不是这个参数,那么就拒绝接受。 

需要特别注意的是这个验证参数的名字(我在这个坑上浪费了2小时),这个名字来源于前端的jsonp参数的值。如果把前端jsonp参数的值改为“aaa”,那么相应的参数就应该是 aaa=jquery31106628680598769732_1512186387045&_=1512186387046

后端接收与处理

知道了jquery ajax jsonp的原理,也知道了需要接受的参数,我们就可以来编写服务器端程序了。 

为了配合json,服务器端需要做的事情可以概括为两步:

第一步、接收验证参数

根据与前端ajax约定的jsonp参数名来接收验证参数,示例如下(使用springmvc,其他语言及框架原理类似)

    @responsebody

    @requestmapping("/getjsonp")

    public string getmyseatsuccess(@requestparam("callback") string callback){

第二步、构造参数并返回

将接收的的验证参数callback与实际要返回的json数据按“callback(json)”的方式构造:

 @responsebody

    @requestmapping("/getmyseat")

    public string getmyseatsuccess(@requestparam("callback") string callback){

        gson gson=new gson();   //google的一个json工具库

        map map=new hashmap<>();

        map.put("seat","1_2_06_12");

        return callback "(" gson.tojson(map) ")";   //构造返回值

    }

四、总结

最终,前后端的相应代码应该是这样的: 

前端

 $.ajax({

            type:"get",

            url:"http://www.deardull.com:9090/getmyseat", //访问的链接

            datatype:"jsonp",  //数据格式设置为jsonp

            jsonp:"callback",  //jquery生成验证参数的名称

            success:function(data){  //成功的回调函数

                alert(data);

            },

            error: function (e) {

                alert("error");

            }

        });

后端

  @responsebody

    @requestmapping("/getmyseat")

    public string getmyseatsuccess(@requestparam("callback") string callback){

        gson gson=new gson();

        map map=new hashmap<>();

        map.put("seat","1_2_06_12");

        logger.info(callback);

        return callback "(" gson.tojson(map) ")";

    }

一、什么是跨域访问

举个栗子:在a网站中,我们希望使用ajax来获得b网站中的特定内容。如果a网站与b网站不在同一个域中,那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的。

总而言之,同源策略规定,浏览器的ajax只能访问跟它的html页面同源(相同域名或ip)的资源。

二、什么是jsonpjsonp(json with padding)是json的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。

由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 html 的元素是一个例外。利用元素的这个开放策略,网页可以得到从其他来源动态产生的 json 资料,而这种使用模式就是所谓的 jsonp。用 jsonp 抓到的资料并不是 json,而是任意的javascript,用 javascript 直译器执行而不是用 json 解析器解析。更具体的原理需要更多篇幅的讲解,小伙伴可以自行去百度。

三、jsonp的使用前端的使用示例

jquery ajax对jsonp进行了很好的封装,我们使用起来很方便。前端示例:

$.ajax({

            type:"get",

            url:"http://www.deardull.com:9090/getmyseat", //访问的链接

            datatype:"jsonp",  //数据格式设置为jsonp

            jsonp:"callback",  //jquery生成验证参数的名称

            success:function(data){  //成功的回调函数

                alert(data);

            },

            error: function (e) {

                alert("error");

            }

        });

需要注意的地方是:

datatype,该参数必须要设置成jsonp

jsonp,该参数的值需要与服务器端约定,详细情况下面介绍。(约定俗成的默认值为callback)

后端的配合示例jquery ajax jsonp原理

后端要配合使用jsonp,那么首先得了解jquery ajax jsonp的一个特点: 

jquery在发送一个ajax jsonp请求时,会在访问链接的后面自动加上一个验证参数,这个参数是jquery随机生成的,例如链接 

http://www.deardull.com:9090/get ... 045&_=1512186387046 中,参数callback=jquery31106628680598769732_1512186387045&_=1512186387046就是jquery自动添加的。 

添加这个参数的目的是唯一标识这次请求。当服务器端接收到该请求时,需要将该参数的值与实际要返回的json值进行构造(如何构造下面讲解),并且返回,而前端会验证这个参数,如果是它之前发出的参数,那么就会接收并解析数据,如果不是这个参数,那么就拒绝接受。 

需要特别注意的是这个验证参数的名字(我在这个坑上浪费了2小时),这个名字来源于前端的jsonp参数的值。如果把前端jsonp参数的值改为“aaa”,那么相应的参数就应该是 aaa=jquery31106628680598769732_1512186387045&_=1512186387046

后端接收与处理

知道了jquery ajax jsonp的原理,也知道了需要接受的参数,我们就可以来编写服务器端程序了。 

为了配合json,服务器端需要做的事情可以概括为两步:

第一步、接收验证参数

根据与前端ajax约定的jsonp参数名来接收验证参数,示例如下(使用springmvc,其他语言及框架原理类似)

    @responsebody

    @requestmapping("/getjsonp")

    public string getmyseatsuccess(@requestparam("callback") string callback){

第二步、构造参数并返回

将接收的的验证参数callback与实际要返回的json数据按“callback(json)”的方式构造:

@responsebody

    @requestmapping("/getmyseat")

    public string getmyseatsuccess(@requestparam("callback") string callback){

        gson gson=new gson();   //google的一个json工具库

        map map=new hashmap<>();

        map.put("seat","1_2_06_12");

        return callback "(" gson.tojson(map) ")";   //构造返回值

    }


四、总结

最终,前后端的相应代码应该是这样的: 

前端

$.ajax({

            type:"get",

            url:"http://www.deardull.com:9090/getmyseat", //访问的链接

            datatype:"jsonp",  //数据格式设置为jsonp

            jsonp:"callback",  //jquery生成验证参数的名称

            success:function(data){  //成功的回调函数

                alert(data);

            },

            error: function (e) {

                alert("error");

            }

        });

后端

  @responsebody

    @requestmapping("/getmyseat")

    public string getmyseatsuccess(@requestparam("callback") string callback){

        gson gson=new gson();

        map map=new hashmap<>();

        map.put("seat","1_2_06_12");

        logger.info(callback);

        return callback "(" gson.tojson(map) ")";

    }


需要注意的是:

前端注意与后端沟通约定jsonp的值,通常默认都是用callback。

后端根据jsonp参数名获取到参数后要与本来要返回的json数据按“callback(json)”的方式构造。

如果要测试的话记得在跨域环境(两台机器)下进行。

网站地图