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 相关文章推荐
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
npm全局环境变量配置详解
Dec 15 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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
PHP安装攻略:常见问题解答(二)
2006/10/09 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
PHP基础知识介绍
2013/09/17 PHP
PHP数组相关函数汇总
2015/03/24 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
js断点调试经验分享
2017/12/08 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
vue中activated的用法
2021/01/03 Vue.js
Python入门篇之数字
2014/10/20 Python
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
彪马日本官网:PUMA日本
2019/01/31 全球购物
初一地理教学反思
2014/01/16 职场文书
上课迟到检讨书
2014/01/19 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
python 调用js的四种方式
2021/04/11 Python
golang 实现Location跳转方式
2021/05/02 Golang
nginx服务器的下载安装与使用详解
2021/08/02 Servers
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL