jsonp跨域请求java后台

什么是JSONP为什么要用JSONP

JSONP是一种投机取巧创造的一种非官方跨域数据交互协议。

为什么要用JSONP,因为要跨域请求,一般直接请求普通文件存在跨域无权限访问的问题,至于为什么JSONP能跨域请求的话,想知道的可以百度,很多,这里就不过多赘述

举栗

前端

当前执行的项目端口号为8080,用此项目请求端口号为8082的项目

如果不是用jsonp的话

在做ajax请求的时候,请求不到并且浏览器会报错,错误如下:

XMLHttpRequest cannot load http://xxxxxxNo 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxxxxxx' is therefore not allowed access.

 window.onload = function(){
		var token ="hitomi";
		 $.ajax({
             type: "get",
             async: false,
             data:{
            	 token:token//传递到后台的参数
             },
           	 //跨域的地址(这里是http://localhost:8082是这个项目地址和端口号,user/jsonplogin是请求的路径,即后台的路径)
             url: "http://localhost:8082/user/jsonplogin",
             dataType: "jsonp",//返回jsonp格式即:flightHandler({xxxxx});
             jsonp: "jsonpCallback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback),作为request参数传到后台
           	 //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据,一个jsonp的名称
             jsonpCallback:"flightHandler",
             success: function(json){
                 alert('返回成功');
             },
             error: function(){
                 alert('fail');
             }
         });
	}
function flightHandler(data) {
        //处理data
        alert(data);
     }

后端

/**
	 * jsonp登录
	 * @return
	 */
	 @ResponseBody
	@RequestMapping(value = "/jsonplogin")
    public String test(
                        HttpServletRequest request,
                        HttpServletResponse response,String token
                        ) throws Exception{
        //String result = "{"+"result"+":"+"flightHandler"+"}";//flightHandler这个参数要返回的页面有的函数
        response.setHeader("Pragma", "no-cache");
        response.setHeader("Cache-Control", "private,no-cache,no-store,max-age=0");
        response.setDateHeader("Expires", 0);
        String str=request.getParameter("jsonpCallback");//对应ajax中jsonp传进来的值,当名称
        if (str==null||str.equals("")) {
            return str;
        } else {
            return str + "(" + str + ")";
        }
    }

前端传到后端的参数

jsonp跨域请求java后台_第1张图片

以下引用此文章:ajax跨域问题处理

Jsonp原理:

  首先在客户端注册一个callback (如:'jsonpCallback'), 然后把callback的名字(如:jsonp123)传给服务器。注意:服务端得到callback的数值后,要用jsonp123(......)把将要输出的json内容包括起来,此时,服务器生成 json 数据才能被客户端正确接收。

  然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 'jsonpCallback'的值 jsonp123

  最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

  客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数,
  传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.(动态执行回调函数)

  可以说jsonp的方式原理上和是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.

  注意,jquey是不支持post方式跨域的.

 

你可能感兴趣的:(JAVA随笔录)