跨域请求之JSONP篇

最新推荐文章于 2024-06-20 20:55:24 发布

astrologer_

最新推荐文章于 2024-06-20 20:55:24 发布

阅读量256

点赞数

分类专栏： Java JavaScript 文章标签： jsonp ajax

本文链接：https://blog.csdn.net/astrologer_/article/details/80029347

版权

Java 同时被 2 个专栏收录

10 篇文章 2 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

JSONP跨域请求

项目开发过程肯定避免不了跨域请求的需求，目前主要的前端后端跨域技术有jsonp, cors, nginx, java的URL类, httpclient等技术。本文简单介绍一下使用jsonp过程中需要注意的一些事项。

百度简介：JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

请求端serverA的js代码：

var url = urlIp+"api/server-jsonp";
$.ajax({
	url : url,
	type : "post",
	dataType : "jsonp",
	data : params,
	jsonp: "callback",
	jsonpCallback: "jsonpCallback",
	timeout: 3000,
	success : function(data) {
		if (data && data.success) {
			$.dialog({
				type : 'alert',
				content : '数据添加成功！',
				onclose : function() {
					parent.dialog.get(window).close();
				}
			});
        } else {
            if (data) {
                swal(data['msg']);
            }
        }
	},
	error:function(XMLHttpRequest, textStatus, errorThrown){
		swal('网络错误，请稍后重新请求！');
	}
}).fail(function (XMLHttpRequest, textStatus, errorThrown) {
	swal('网络超时，请稍后重新请求！');
});

被请求端serverB的接口方法:

@RequestMapping("/api/server-jsonp")
public void addAjax(HttpServletRequest request, HttpServletResponse response) {
    // 表单check
    String callback = request.getParameter("callback");
    ------
    serverB请求处理逻辑代码
    ------
    // Map是请求返回结果
    ajaxJsonp(Map, response, callback);
}

封装jsonp的jsonpCallback方法:

private void ajaxJsonp(Map restfulResponse, HttpServletResponse response, String callback){
    StringBuffer responseStr  = new StringBuffer();
    responseStr.append(callback);
    responseStr.append("({\"success\":");
    responseStr.append(restfulResponse.isSuccess());
    responseStr.append(", \"msg\":\"");
    responseStr.append(restfulResponse.getMsg());
    responseStr.append("\"})");
    try {
        InputStream is = new ByteArrayInputStream(responseStr.toString().getBytes("UTF-8"));
        IOUtils.copy(is, response.getOutputStream());
        response.flushBuffer();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

jsonp目前存在一定的缺陷，从百度简介的字面意思可以看出jsonp并不是ajax请求，本质上jsonp欺骗了浏览器，实际是在客户端动态添加了个<script></script>然后将url指向要请求的地址，script是没有同源策略的。用这种办法自然只能是get。JSONP的本质是动态向页面中插入一个"script"标签加载跨域内容，显然这种办法没办法由POST实现。如果你用post、XmlHttpRequest就一定会去检查是否跨域，但是用get，会欺骗浏览器而得到所需要的数据。