跨域请求原理及具体实现方案

域名不同或者域名相同端口不同都算是跨域请求，js出于对安全考虑不支持跨域请求。我们可以使用JSONP解决跨域问题。

1.jsonp只能使用get请求，解决同源问题，返回javascript代码，因为请求javascript文件是没有同源问题的。

2.当请求数据类型为jsonp时，会将callback=jsonpCallback（自定义函数名称）加在url上，http://127.0.0.1:9999/TestController/testJson?callback=jsonpCallback

3.前台javascript中定义jsonpCallback函数，此函数必须定义在window下，也就是全局的函数，否则找不到。

4.后台获取请求的callback参数值jsonpCallback，返回字符串"jsonpCallback(result)"，result为返回结果。

5.请求返回的是script 代码，首先会调用jsonpCallback自定义函数，不管是否找到该函数，都会调用success函数。

方式一：

前台代码：

$.ajax({
    url: 'http://127.0.0.1:9999/TestController/testJson',
    type: "get",
    async:false,
    data: {},
    dataType: 'jsonp', //这里为jsonp类型
    jsonp: 'callback', // get请求携带的参数名称，
    jsonpCallback: 'login', //自定义回调函数名称，可以不写Jqery有默认的函数名称
    success: function(json){
        alert(json);
        var datastr = eval("("+json+")");
        alert(datastr.name);
        alert(datastr.age);
    },
    error : function() {
        alert("异常！");
    }
});

后台代码：

@RestController
@RequestMapping("TestController")
public class AccessController {

   @GetMapping(value="testJson")
   public String testJson(String callback){
      String message = "{\"name\":\"张三\",\"age\":\"30\"}";
      String json = JSON.toJSONString(message);
      String result = callback + "(" + json + ");";
      return result;
   }
}

方式二

前台代码：

$.ajax({
    url: 'http://127.0.0.1:9999/TestController/testJson',
    type: "get",
    async:false,
    data: {},
    dataType: 'jsonp',
    jsonp: 'callback',
    jsonpCallback: 'login',
    success: function(json){
        alert(json.data);
        alert(json.retCode);
        if(!json.status){
            alert(json.msg);
        }
    },
    error : function() {
        alert("异常！");
    }
});

后台代码

包装返回值的类为      com.fasterxml.jackson.databind.util.JSONPObject;

@RestController
@RequestMapping("TestController")
public class AccessController {

    @GetMapping(value="testJson")
    public String testJson(String callback){
        //构造函数参数分别为 status, retCode, msg, data
        ReturnData ReturnData = new ReturnData(true, 0, "请求成功", null);
        JSONPObject jsonobj = new JSONPObject(callback, ReturnData);
        return jsonobj;
    }
}
————————————————
版权声明：本文为CSDN博主「_ 小北_」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/yh_852974543/article/details/90295836

jsonp
ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了script标签可以跨域链接资源的特性。

jsonp的原理如下：

<script type="text/javascript">
    function aa(dat){
        alert(dat.name);
    }
</script>
<script type="text/javascript" src="....../js/data.js"></script>

页面上定义一个函数，引用一个外部js文件，外部js文件的地址可以是不同域的地址，外部js文件的内容如下：

aa({"name":"tom","age":18});

跨域请求原理及具体实现方案

猜你喜欢