springmvc ajax tomcat简单配置实现跨域访问

发现一种改动最小也能实现跨域请求的方法

服务端

服务端修改web.xml配置文件, 增加过滤器 (不用导入任何jar包, 用的tomcat自带jar)

<!-- 支持跨域请求 -->
<filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

服务端controller使用@RequestBody来获取参数

@RequestMapping("/get_json.html")
public void commonGetJson(@RequestBody String json,HttpServletRequest request,HttpServletResponse response){
    System.out.println(json);
    // 输出json格式字符串
    // {"parameter":{"userName":"17737190001","userPass":"6e316845103d21d700aceecdba7eadae"},"version":100,"opcode":"U00006"}
}

客户端

使用jquery的ajax, 设置crossDomain为true, 允许跨域访问 , 下面的jquery库引用的百度静态资源库

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function(){
        $.ajax({
            url:"http://192.168.16.20:8080/zyzp-web-router/common/get_json.html",
            data:JSON.stringify({"parameter":{"userName":"17737190001","userPass":"6e316845103d21d700aceecdba7eadae"},"version":100,"opcode":"U00006"}),
            dataType:"text",
            type:"POST",
            crossDomain:true,
            contentType:"application/json;charset=UTF-8",
            success:function(data){
                console.log(data);
            }
        });
    });
</script>

- JSON.stringify 将json对象转换为json字符串
- crossDomain:true 设置允许跨域请求
- contentType:"application/json;charset=UTF-8" 设置发送给服务器时的内容编码类型

配置好服务端后, 直接在浏览器运行这段js代码, 就能跨域访问到服务器的数据

其它还有jsonp方式, 在<mvc:annotation-driven>中配置转化器, 如果链接中存在callback参数a , 那么就输出js代码

a({"userId":1});

如需帮助可向我发起QQ聊天发起QQ聊天

友情赞助

如果您喜欢此文，感觉对您工作有帮助，预期领导会给您涨工资，不妨小额赞助一下，让我有动力继续努力。

赞助方式：打开支付宝App，使用“扫一扫”付款，付款码见下图，别忘了付款留言哦！

或使用微信, 不用加好友就能付款