美文网首页日常学习编程技术
SpringBoot多跨域请求的支持(JSONP)

SpringBoot多跨域请求的支持(JSONP)

作者: 木叶之荣 | 来源:发表于2017-01-12 23:35 被阅读227次

在我们做项目的过程中,有可能会遇到跨域请求,所以需要我们自己组装支持跨域请求的JSONP数据,而在4.1版本以后的SpringMVC中,为我们提供了一个AbstractJsonpResponseBodyAdvice的类用来支持jsonp的数据(SpringBoot接收解析web请求是依赖于SpringMVC实现的)。下面我们就看一下怎么用AbstractJsonpResponseBodyAdvice来支持跨域请求。
使用AbstractJsonpResponseBodyAdvice来支持跨域请求很简单,只需要继承这个类就可以了。具体代码如下:

package com.zkn.learnspringboot.config;

import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;

/**
 * Created by wb-zhangkenan on 2016/12/1.
 */
@ControllerAdvice(basePackages = "com.zkn.learnspringboot.web.controller")
public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{

    public JsonpAdvice() {

        super("callback","jsonp");
    }
}

下面我们写个类来测试一下:

package com.zkn.learnspringboot.web.controller;

import com.zkn.learnspringboot.domain.PersonDomain;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * Created by wb-zhangkenan on 2016/12/1.
 */
@RestController
@RequestMapping("/jsonp")
public class JsonpTestController {
    @Autowired
    private PersonDomain personDomain;

    @RequestMapping(value = "/testJsonp",produces = MediaType.APPLICATION_JSON_VALUE)
    public PersonDomain testJsonp(){

        return personDomain;
    }
}

当我们发送请求为:http://localhost:8003/jsonp/testJsonp的时候,结果如下:

Paste_Image.png

当我们发送的请求为:http://localhost:8003/jsonp/testJsonp?callback=callback的时候,结果如下所示:

Paste_Image.png

看到区别了吗?当我们在请求参数中添加callback参数的时候,返回的数据就是jsonp的,当我们请求参数中不带callback的时候,返回的数据是json的。可以让我们方便的灵活运用。下面再奉上一个jsonp的完整案例。

前台页面:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
   <title>Title</title>
   <script src="resources/js/jquery-2.1.4.min.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="测试jsonp请求" onclick="testJsonp()" />
<script type="text/javascript">
   function testJsonp() {
       $.ajax({
           type:'get',
           url:'http://localhost:8003/jsonp/testJsonp',
           dataType:'jsonp',
           jsonp:"callback",
           success:function (data) {
               alert(data.userName+"  "+data.passWord);
           },
           error:function (err) {
               alert('出现错误了!!!');
           }
       });
   }
</script>
</body>
</html>

后台代码1:

package com.zkn.learnspringmvc.news.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * Created by zkn on 2016/12/3.
 */
@Controller
public class JsonpTestController {

    @RequestMapping("testJsonp")
    public String testJsonp(){

        return "jsonp";
    }
}

下面我们发送请求如下:http://localhost:8080/LearnSpringMvc/testJsonp
当我们点击测试jsopn请求这个按钮的时候,效果如下:

Paste_Image.png

我们成功的实现了一个跨越的请求。更详细的请求信息如下:

Paste_Image.png

相关文章

  • SpringBoot多跨域请求的支持(JSONP)

    在我们做项目的过程中,有可能会遇到跨域请求,所以需要我们自己组装支持跨域请求的JSONP数据,而在4.1版本以后的...

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

  • 跨域解决方案

    1.使用Jsonp解决跨域(不推荐,因为只支持get请求,不支持post请求) 1.前端AJAX请求dataTyp...

  • 免费的HTTP接口代理,可解决跨域问题

    可以做到 让不支持跨域的远程数据接口支持跨域。让不支持JSONP的远程数据接口支持JSONP(添加参数&callb...

  • 跨域

    ??JSONP只能解决GET请求跨域,不能解决POST请求跨域问题,XHR2可以解决GET,POST方式的请求跨域...

  • 做demo和学习过程当中遇到的一些问题,收集的博文

    轻松搞定JSONP跨域请求--->关键字: 跨域, 同源策略, JSONP原理 git拉取远程分支到本地 git ...

  • JavaScript - GET/POST及跨域方法

    xhr 原生方法请求 window fetch 方法 关于跨域 利用JSONP实现跨域调用 使用 CORS(跨域资...

  • JSONP技术原理及实现

    转自《跨域jsonp的原理》 首先确定为什么要用jsonp,因为要跨域请求数据,那为什么会发生跨域呢,因为浏览器的...

  • js跨域问题

    来源 javascript中实现跨域的方式总结 第一种方式:jsonp请求;jsonp的原理是利用 标签的跨域特性...

  • javasscript - 收藏集 - 掘金

    jsonp 跨域请求详解——从繁至简 - 前端 - 掘金什么是jsonp?为什么要用jsonp?JSONP(JSO...

网友评论

    本文标题:SpringBoot多跨域请求的支持(JSONP)

    本文链接:https://www.haomeiwen.com/subject/mpmjbttx.html