当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jsonp跨域请求详解

jsonp跨域请求详解

2017年12月12日  | 移动技术网IT编程  | 我要评论

前端时间因为太忙，一直没有处理跨域这个事情，今天抽了一个小时轻松解决，突然发现上个月又写了很多重复代码。因为现在公司项目分为多个工程，前后端完全分离，manage工程做所有业务逻辑处理，app、微信两个前置工程通过httpclient去调用manage工程的restful接口，而我就是负责微信这个工程，久而久之发现真的重复了很多controller层的代码，愈发激活了这个所有接口支持浏览器跨域请求的封装。话不多讲，见核心代码

1.定义一个类，继承mappingjackson2httpmessageconverter，重写writeinternal方法，方法里简单判断一下是否带有callback参数，没有直接返回数据，有的话将数据用callback参数的值括号包裹起来返回。

import java.io.ioexception;

import javax.servlet.http.httpservletrequest;

import org.apache.commons.io.ioutils;
import org.apache.commons.lang3.stringutils;
import org.springframework.http.httpoutputmessage;
import org.springframework.http.converter.httpmessagenotwritableexception;
import org.springframework.http.converter.json.mappingjackson2httpmessageconverter;
import org.springframework.web.context.request.requestcontextholder;
import org.springframework.web.context.request.servletrequestattributes;

import com.fasterxml.jackson.core.jsonencoding;
import com.fasterxml.jackson.core.jsonprocessingexception;

public class callbackmappingjackson2httpmessageconverter extends mappingjackson2httpmessageconverter {

 // 做jsonp的支持的标识，在请求参数中加该参数
 private string callbackname;

 @override
 protected void writeinternal(object object, httpoutputmessage outputmessage) throws ioexception,
   httpmessagenotwritableexception {
  // 从threadlocal中获取当前的request对象
  httpservletrequest request = ((servletrequestattributes) requestcontextholder
    .currentrequestattributes()).getrequest();
  string callbackparam = request.getparameter(callbackname);
  if (stringutils.isempty(callbackparam)) {
   // 没有找到callback参数，直接返回json数据
   super.writeinternal(object, outputmessage);
  } else {
   jsonencoding encoding = getjsonencoding(outputmessage.getheaders().getcontenttype());
   try {
    string result = callbackparam + "(" + super.getobjectmapper().writevalueasstring(object)
      + ");";
    ioutils.write(result, outputmessage.getbody(), encoding.getjavaname());
   } catch (jsonprocessingexception ex) {
    throw new httpmessagenotwritableexception("could not write json: " + ex.getmessage(), ex);
   }
  }

 }

 public string getcallbackname() {
  return callbackname;
 }

 public void setcallbackname(string callbackname) {
  this.callbackname = callbackname;
 }

}

2.定义java bean，注意修改class扫描路径，这样每次请求过来都会调起mappingjackson2httpmessageconverter类里的riteinternal这个方法，如果请求带上了callback参数，则将以callbackvalue('data')格式的数据返回给前端。

<!-- 定义注解驱动 -->
 <mvc:annotation-driven>
  <mvc:message-converters register-defaults="true">
   <bean
    class="xxx.xxx.xxx.callbackmappingjackson2httpmessageconverter">
    <property name="callbackname" value="callback" />
   </bean>
  </mvc:message-converters>
 </mvc:annotation-driven>

3.前端通过jquery封装的ajax方式调用，这里做了一些代码节省，关键代码已红色标出

<script type="text/javascript">
 var feedback = {
  init: function(){
   var self = feedback;
   self.bind();
  },
  test: function(data){
   console.log("测试jsonp",data)
  },
  bind: function(){
    var self = feedback;

    var par = {};
     par.callback = 'feedback.test';

    $.ajax({ 
    url:"http://manage.danong.com/rest/open/queryinvitelist", 
    data: par,
    datatype:'jsonp', 
    jsonp:'callback', 
    timeout:3000 
   }); 
  }
 }
 feedback.init();
</script>

4.浏览器打印log

 

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网