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 prototype属性使用说明
May 13 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
微信小程序签到功能
Oct 31 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
解决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利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
Django学习之文件上传与下载
2019/10/06 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
写给女朋友的道歉信
2014/01/12 职场文书
政风行风评议整改方案
2014/09/15 职场文书
四风自我剖析材料
2014/09/30 职场文书
优秀教师个人总结
2015/02/11 职场文书
感恩教育主题班会
2015/08/12 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
Oracle 多表查询基本语法实例
2022/04/18 Oracle