Spring mvc + BootStrapTable 跨域请求问题

前言

在项目过程中，遇到了ajax跨域请求的问题。后台用的SSM，前端用的bootstrap table表格插件，特地记录一下项目中遇到的问题。

ajax跨域请求

前端代码：

$.ajax({

    type : "get",//jsonp只能使用get，网上资料，暂未考证

    url : "prefix" + "getProducttype.do",//前缀配置在一个JS中，方便改动

    dataType: 'jsonp',//是jsonp非json

    contentType : 'application/json;charset=utf-8',

    success : function(data) {

},

error : function() {

}

});

后端重要代码：

这个接口返回的是一个树结构（这些东西不是重点），返回结果为com.fasterxml.jackson.databind.util.JSONPObject.JSONPObject

要处理前端ajax自动传过来的callback函数，jquery中默认callback可以被success处理，所以前端ajax无需再定义jsonpcallback，也方便管理，这里的callback是jquery随机生成的，我们只需要拿到然后再返回过去就行了。

上面就是简单的SSM+ajax跨域问题，接来下便是重点内容。

bootstraptable ajax跨域问题

一般情况下，我们写bootstrap table初始化的代码是这样的：

colums、queryParams省略掉，如果想学习bootstrap table相关知识，可以先去百度搜其他的文章，这种重点讲的是bootstrap table的跨域问题。

这是bootstrap table ajax跨域的写法，首先去到url、method和contentType，然后新增一个ajax属性

ajax : function (request) {

    $.ajax({

        type : "get",

        url : "http://ip:8080/CERP/getProductList.do",

        dataType: 'jsonp',

        contentType : 'application/json',

        success : function (msg) {

            request.success({

                row : msg

            });

            $('#productList').bootstrapTable('load', msg);

        },

        error:function(){

        }

    });

},

后台相关代码：

和之前的写法并没有什么两样，知识需要把返回值类型改为JSONPObject就可以了。

至此，bootstrap table ajax跨域问题就已经完美解决了。

# 2021-03-12 更新

如果你不幸的看到了这个文章，请放弃JSONP的方式，以及BootStrapTable，选择更新的框架，如果是旧项目或者非写不可，那就随意吧。