jsonp跨域请求详解


Posted in Javascript onJuly 13, 2017

前端时间因为太忙,一直没有处理跨域这个事情,今天抽了一个小时轻松解决,突然发现上个月又写了很多重复代码。因为现在公司项目分为多个工程,前后端完全分离,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

 jsonp跨域请求详解

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
基于JavaScript获取url参数2种方法
Apr 17 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 #Javascript
JavaScript反弹动画效果的实现代码
Jul 13 #Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 #Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 #Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 #Javascript
js实现图片上传预览原理分析
Jul 13 #Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 #Javascript
You might like
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
一个php作的文本留言本的例子(五)
2006/10/09 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
Python中的函数作用域
2018/05/07 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
党员批评与自我批评材料
2014/10/14 职场文书
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫