继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

spring后台和jsonp解决跨域问题

纯情的慕哥
关注TA
已关注
手记 22
粉丝 5
获赞 8

为什么会发生AJAX跨域

1.浏览器限制
2.跨域 :协议 域名 端口
3.XHR(xmlhttprequest)请求才会报跨域问题

同时满足以上3點才会产生跨域安全问题

解決思路

图片描述

使用jsonp

原因:不使用XHR(xmlhttprequest)请求

前端代码

$.ajax({
	    	url : interfaceUrl,
	        type : "get",
	        dataType : "jsonp",
	        data : paramObj,
	        jsonp: "callbackparam",
	        jsonpCallback: "success_jsonpCallback",
	        success : function(result) {
	        ……
	        }

后端代码

@GetMapping(value = "/map", produces = {"application/javascript;charset=UTF-8"})
    @ResponseBody
    @ApiOperation("根据用户id查询轨迹图")
    public String getTrackMap(@RequestParam(value = "callbackparam") String callback) {
        String str = "……";
        return callback + "(" + str + ")";
    }

这里要注意两点,

1.produces = {“application/javascript;charset=UTF-8”}

返回类型为javascript

2.return callback + “(” + str + “)”

获取前端传递的callback参数并拼接需要给前端的数据

结果

图片描述

可以通过在ajax中在控制台打印"result"参数来观察获取的数据!

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP