js跨域请求之jsonp原理和运用

爱被打了一巴掌 2022-05-10 14:40 427阅读 0赞

1、js请求后端服务时，域名不同或域名相同端口不同都是**跨域**；

2、无论哪个浏览器js都不能跨域请求后端服务，解决办法为jsonp；jsonp不是新技术，只是一个解决方案；即js不请求后端服务而是跨域请求js，即跨域加载js文件，**而这个js文件由服务器端返回**。

3、js中可以在cookie中取出token

4、js跨域取数据时，即使数据返回来，但浏览器判断是跨域取的数据也不会让js拿到，自动屏蔽掉

5、jsonp原理图：

![70][]

**上图解释：**

**情况1--直接请求：**当localhost:8082 服务器js文件Ajax跨域请求时，localhost:8088处理数据正常返回json数据，返回到浏览器时被屏蔽掉，即localhost:8082上不能显示请求的信息

**情况2--直接请求带参数callback==mycall：**当localhost:8082 服务器js文件Ajax跨域请求时，在js中Ajax请求代码中配置上daType:jsonp【**jQuery已对jsonp进行了封装，请求时在自己编写的ajax请求链接后面自动携带参数callback=mycall 。此请求相当于src请求，请求一个远程的js文件，这个远程的文件中包含了服务器端返回的数据，格式为mycall(data)。jQuery在本地js文件中创建函数mycall(data)，mycall函数名的值也为jQuery自动生成**】，服务器得到请求后，将json数据当参数封装进mycall方法中以字符串方式返回（相当于一个js文件），浏览器识别为js文件即不会去屏蔽，进而加载进js中，js调用mycall方法传入参数，经过解析即可显示数据。

**js如图配置即可**：

![70 1][]代码：

**服务器端处理：**

![70 2][]

代码：

@RequestMapping(value = "/token/{token}",method = RequestMethod.GET,
    // 浏览器对返回的字符串进行编码成json，如果不设置可能会编译失败
                        produces =MediaType.APPLICATION_JSON_UTF8_VALUE)
        @ResponseBody
        public String getUser(@PathVariable("token")String token, String callback){
            TaotaoResult result = userService.token(token);
            if(StringUtils.isNotBlank(callback)){
                return callback+"("+JsonUtils.objectToJson(result) +")";
            }
            return JsonUtils.objectToJson(result);
        }

*注意：在注解@RequestMapping中加上produces =MediaType.APPLICATION\_JSON\_UTF8\_VALUE这句话，意思是浏览器对返回的字符串进行编码成json，如果不设置可能会编译失败，导致页面上显示不出数据*

或者：

//jsonp方法2，仅限spring4.1版本以上
        @RequestMapping(value = "/token/{token}",method = RequestMethod.GET)
        @ResponseBody
        public Object getUser(@PathVariable("token")String token, String callback){
            TaotaoResult result = userService.token(token);
            if(StringUtils.isNotBlank(callback)){
                MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(result);
                //设置回调方法
                mappingJacksonValue.setJsonpFunction(callback);
                return mappingJacksonValue;
            }
            return result;
        }

后台js代码实现：

![70 3][]

参考博客[https://www.cnblogs.com/chiangchou/p/jsonp.html][https_www.cnblogs.com_chiangchou_p_jsonp.html]

[70]: /images/20220505/d23f8f35f9af436e996aa662da4e5d91.png
[70 1]: /images/20220505/63a16070e8134709a1371f724d7f4f98.png
[70 2]: /images/20220505/3a4abc9d53ec460b9eb03737e93e7fdf.png
[70 3]: /images/20220505/2e1516c18511486c8abdb0bbcfc973cd.png
[https_www.cnblogs.com_chiangchou_p_jsonp.html]: https://www.cnblogs.com/chiangchou/p/jsonp.html