java跨域原理_【原】Java跨域以及实现原理

前言:最近研究了一下跨域,主要是jsonp的实现,经过测试后总结如下:

一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准。下面我就用8080端口请求8081的接口看看会提示什么吧?

e355d35b898f9b78e9cb53d5c603aab0.png

9a63e6c8a5f6921de2e32d005e8461fb.png

如上图所示,已经被浏览器拦截了,所以现在我们需要换jsonp的方法来获取服务器返回的数据。

93bb200eb158224564e0918c525e27db.png

服务端的接口如下:

@RequestMapping(value ="/hello", method =RequestMethod.GET)

@ResponseBody

public String hello(HttpServletRequest request){

Map map = new HashMap();

map.put("result", "content");

JSONObject resultJSON= JSONObject.fromObject(map); //根据需要拼装json

String jsonpCallback= request.getParameter("jsonpCallback");//返回jsonp格式数据

System.out.println(jsonpCallback+ "(" + resultJSON.toString(1, 1) + ")");return jsonpCallback + "(" + resultJSON.toString(1, 1) + ")";

}

拼接的格式为:jQuery164006948568608122441_1476774974068({"result": "content"})  其实就是在json外面包了一下而已,这样在ajax就能正常得到json里面的数据了

21db5a1e1738809c56eee198564431cc.png

这里给贴上JSON和JSONP的格式以便大家对比:

{"message":"获取成功","state":"1","result":{"name":"工作组1","id":1,"description":"11"}

}

callback({"message":"获取成功","state":"1","result":{"name":"工作组1","id":1,"description":"11"}

})

尽管实现了跨域的功能,但是一直好奇为什么jsonp就能得到数据了呢,带着好奇我开始在网上查阅资料并自己动手实践和理解,最终明白了内部运作原理。首先可以发现在引入外部的css或者js的时候是不会受到浏览器拦截的,比如src没有受到跨域的影响,那么jsonp是否是利用这个原理呢?答案是的,JSONP就是利用动态生成的js格式文件把数据装进去传给客户端进行解析。

下面是sonp客户端实现的核心部分实例,通过js组装

//提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)

var url = "http://localhost:8080/hello?callback=flightHandler";//创建script标签,设置其属性

var script = document.createElement('script');

script.setAttribute('src', url);//把script标签加入head,此时调用开始

document.getElementsByTagName('head')[0].appendChild(script);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值