SSM(六)跨域传输

时间 2019-11-06

标签 ssm 传输繁體版

原文原文链接

前言

不知你们在平时的开发过程当中有没有遇到过跨域访问资源的问题，我不巧在上周就碰到一个这样的问题，幸运的是在公司前端同窗的帮忙下解决了该问题。javascript

什么是跨域问题？

只要协议、域名、端口有任何一个不一样，都被看成是不一样的域
只要是在不一样域中是没法进行通讯的。

基于以上的的出发点，咱们又有跨域共享资源的需求(譬如如今流行的先后端分离以后分别部署的状况)，本文所采用的解决办法是JSONP，说到JSONP就会首先想到JSON。虽然只有一字之差但意义却彻底不同，首先科普一下JSON。html

JSON

其实如今JSON已是至关流行了，只要涉及到先后端的数据交互大都都是采用的JSON(不论是web仍是android和IOS)，因此我这里就举一个例子，就算是没有用过的同窗也能很快明白其中的意思。前端

PostMan

首先给你们安利一款后端开发的利器PostMan,能够用于模拟几乎全部的HTTP请求，在开发阶段调试后端接口很是有用。这是一个Chrome插件，能够直接在google商店搜索直接下载(固然前提你懂得)。以后界面就以下：。界面很是简洁，有点开发经验的童鞋应该都会使用，不太会用的直接google下就能够了比较简单。接着咱们就能够利用PostMan来发起一次请求获取JSON了。这里以我SSM项目为例,也正好有暴露一个JSON的接口。地址以下: http://www.crossoverjie.top/SSM/content_load。直接在POSTMAN中的地址栏输入该地址，采用GET的方式请求，以后所返回的就是JSON格式的字符串。因为Javascript原生的就支持JSON，因此解析起来很是方便。java

JSONP

好了，终于能够谈谈JSONP了。以前说道JSONP是用来解决跨域问题的，那么他是如何解决的呢。通过咱们开发界的前辈们发现，HTML中拥有SRC属性的标签都不受跨域的影响，好比：<script>、<img>、<iframe>标签。因为JS原生支持JSON的解析，因而咱们采用<script>的方式来处理跨域解析，代码以下一看就明白。 web端:android

<html lang="zh">
<head>
    <script type="text/javascript">
        $(document).ready(function(){
            $.ajax({
                type: "get",
                async: false,
                url: "http://www.crossoverjie.top/SSM/jsonpInfo?callback=getUser&userId=3",
                dataType: "jsonp",
                jsonp: "callback",//通常默认为:callback
                jsonpCallback:"getUser",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也能够写"?"，jQuery会自动为你处理数据
                success: function(json){
                    /**
                     * 得到服务器返回的信息。
                     * 能够作具体的业务处理。
                     */
                    alert('用户信息：ID： ' + json.userId + ' ，姓名： ' + json.username + '。');
                },
                error: function(){
                    alert('fail');
                }
            });
        });
    </script>

</head>

<body oncontextmenu="return false">

</body>

</html>

其中咱们采用了JQuery给我封装好的函数，这样就能够自动帮咱们解析了。首先咱们来看下代码中的http://www.crossoverjie.top/SSM/jsonpInfo?callback=getUser&userId=3这个地址返回的是什么内容，仍是放到POSTMAN中执行以下：。能够看到咱们所传递的callback参数带着查询的数据又原封不动的返回给咱们了，这样的话即便咱们不使用JQuery给我封装好的函数，咱们自定义一个和callback名称同样的函数同样是能够解析其中的数据的，只是Jquery帮咱们作了而已。git

前端没问题了，那么后端又是如何实现的呢？也很简单，以下：github

@RequestMapping(value = "/jsonpInfo",method = { RequestMethod.GET })
    @ResponseBody
    public Object jsonpInfo(String callback,Integer userId) throws IOException {
        User user = userService.getUserById(userId);
        JSONPObject jsonpObject = new JSONPObject(callback,user) ;
        return jsonpObject ;
    }

后端采用了jackson中的JSONPObject这个类的一个构造方法，只须要将callback字段和须要转成JSON字符串的对象放进去便可。须要主要的是须要使用@ResponseBody注解才能成功返回。web

总结

其实网上还有其余的方法来处理跨域问题，不过我以为这样的方式最为简单。一样JSONP也是有缺点的，好比：只支持GET方式的HTTP请求。以上代码依然在博主的SSM项目中，若有须要能够直接FORK。ajax

项目地址：https://github.com/crossoverJie/SSM.gitjson

我的博客地址：http://crossoverjie.top。

GitHub地址：https://github.com/crossoverJie。