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实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
js中unicode转码方法详解
Oct 09 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 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
对PHP依赖注入的理解实例分析
2016/10/09 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
jquery 笔记 事件
2011/11/02 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
Python实现多线程下载文件的代码实例
2014/06/01 Python
python中list常用操作实例详解
2015/06/03 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
python3实现猜数字游戏
2020/12/07 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
介绍一下游标
2012/01/10 面试题
办公室文秘自我鉴定
2013/09/21 职场文书
小学安全教育材料
2014/02/17 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
倡议书作文
2015/01/19 职场文书
中班上学期个人总结
2015/02/12 职场文书
借条格式范本
2015/05/25 职场文书
同学聚会感言一句话
2015/07/30 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server