jsonp突破同源策略,实现跨域访问请求

简介:        跨域访问问题,相信大家都有遇到过。这是一个很棘手的问题。不过道高一尺,魔高一丈,对于这类问题,总有解决问题的方案。最近我又接触到了这个问题,解决的途径是ajax+jsonp。

       跨域访问问题,相信大家都有遇到过。这是一个很棘手的问题。不过道高一尺,魔高一丈,对于这类问题,总有解决问题的方案。最近我又接触到了这个问题,解决的途径是ajax+jsonp。


       说到这个问题,不得不说一下“同源策略(Same-Origin Policy)”,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源,就是必须协议、域名、端口都一致的,才叫做同源。例如:http://www.12306.cn和https://www.12306.cn,由于协议不一致,就不是同源。http://127.0.0.1:8080/test1和http://localhost:8080/test1 也不属于同源,因为域名不一致。端口不同当然也不叫同源了。


       如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。这是一个令web开发人员非常手疼的问题。比如,我现在打开百度网页,然后在控制台中请求CSDN的网页,那么就会报如图所示的异常:



       在上图中,大家可能会看到这个词儿——“Access-Control-Allow-Origin”,它是W3C标准中为了解决同源策略引起的跨域问题而提出的一种技术——“跨域资源共享(CORS,Cross-Origin Resource Sharing)”。只要你在服务端设定这个Access-Control-Allow-Origin的header就可以允许跨域访问了。有兴趣的话,自己查一下,很简单。不过它有安全隐患,主要是因为支持通配符*。每个网站都可以随意请求,那就太不安全了。如:

response.setHeader("Access-Control-Allow-Origin", "*");

       Query中$.ajax的get方法,是支持跨域访问的,不过dataType要设定为“jsonp”。Jsonp(JSON with Padding)是 json 的一种“使用模式”,可以让网页从别的网域获取资料。jsonp是采用的js的回调机制来实现的。使用方式也很简单,代码如下:

 
$.ajax({ 
  url: 'http://localhost:8080/test2/searchJSONResult.action',
  type: "GET", 
  dataType: 'jsonp', 
  data: {name:”ZhangHuihua”}, timeout: 5000, 
  success: function (json) {
    //客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数 
    alert(json); 
  }, 
  error: function (){
    alert("请求失败!"); 
   }
});

//简单方式如下:
$.getJSON("http://localhost:8080/test2/searchJSONResult.action?name1=ZhangHuihua&callback=?",
function(json){ // 执行代码
});

       在服务器端,重新拼接json数据:

/** 获取请求的各个参数(用户名等) **/
Map map = request.getParameterMap();
/** 获取jsonp的回调函数名 **/
String callback = request.getParameter("callback");
/** 调用业务逻辑,并将结果转化为json格式 **/
String msg = convert2Json(services.login(map))
/** 重新拼接格式,并输出  **/
out.println(callback + "('" + msg + "')");

       这样就可以在浏览器获取到异源服务端返回的json数据了。这里返回的跟json格式不一样,它的格式是回调函数名+(json数组)。其中小括号不可以省略。否则请求是发送成功了,但是却获取不到数据,因为返回的数据格式出错了。效果图如下:



 

目录
相关文章
|
12月前
|
JSON JavaScript 前端开发
如何处理跨域请求:JSONP、CORS 和代理服务器
处理跨域请求是前端开发中的常见挑战,因为浏览器的同源策略限制了在不同域名、协议或端口之间进行直接通信。为了解决跨域请求的问题,可以使用以下三种常见的方法:JSONP、CORS和代理服务器。
359 0
|
JSON JavaScript 前端开发
jsonp解决Ajax跨域问题
jsonp解决Ajax跨域问题
87 0
|
前端开发 安全 JavaScript
聊聊同源策略限制AJAX请求
浏览器的同源策略及相关的AJAX跨域解决方案相信各位前端🐒们已经烂熟于心了,最近我脑子里突然冒出一些问题,就是标题中为什么同源策略要限制AJAX请求 接下来我们来讨论下这些问题,可能某些问题对于你来说很荒谬,但希望能对你带来一些奇怪的感觉,接下来就是我的一个思考过程+资料查阅+相关解释 这篇博客算是一个提问吧,非该领域的人,有些问题检索起来不知如何提问,所以这里写了一篇文章
116 0
|
JSON 安全 JavaScript
跨域访问(JSONP)
跨域访问(JSONP)
119 0
跨域访问(JSONP)
|
前端开发
利用jsonp解决跨域问题
这篇文章给大家分享的是利用jsonp解决跨域问题。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
80 0
|
JSON 缓存 JavaScript
同源策略与跨域访问(jsonp和cors等)
同源策略与跨域访问(jsonp和cors等)
275 0
同源策略与跨域访问(jsonp和cors等)
|
缓存 应用服务中间件 Linux
跨域访问
跨域是指从一个域名的网页去请求另一个域名的资源。比如从 www.a.com 页面去请求 www.b.com 的资源。
跨域访问
|
JSON 缓存 JavaScript
JSONP - 跨域篇
JSONP - 跨域篇
216 0
JSONP - 跨域篇
|
JSON JavaScript 前端开发
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
230 0
学习AJAX必知必会(5)~同源策略、解决跨域问题(JSONP、CORS)
Ajax-21:设置CORS响应头实现跨域
Ajax-21:设置CORS响应头实现跨域
197 0