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){//执行代码
});

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!