前端vue跨域请求，后端是ssm处理该请求并且返回数据

无敌的宇宙

擅长邻域：Java,HTML,JavaScript,MySQL,支付，退款，图片上传

分类： Java 标签： vue跨域请求 ssm处理跨域请求并且返回数据 ssm怎么返回跨域请求的数据

2020-10-15 19:34:02 1192浏览

前端使用vue发起跨域请求，后端是ssm框架写的，已经成功接收到vue发过来的请求了，但是返回值前端一直接收不到？？这是怎么回事呢，想想应该是跨域请求和非跨域的请求的返回值类型不一样，最后终于解决了这个问题，直接上代码。

前端使用vue发起跨域请求，后端是ssm框架写的，已经成功接收到vue发过来的请求了，但是返回值前端一直接收不到？？这是怎么回事呢，想想应该是跨域请求和非跨域的请求的返回值类型不一样，最后终于解决了这个问题，直接上代码。
引入插件

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

前端代码：

<div class="wrap" id="app">
        <div class="search_form">
            <div class="logo"><img src="img/logo.png" alt="logo"></div>
            <div class="form_group">
                <input type="text" v-model="title"   @keyup.enter="searcher()" class="input_txt" placeholder="请输入查询的试题内容"/>
                <button class="input_sub" @click="searcher()" type="button"  >搜索</button>
                
               
	 
	 
            </div><br/><br/>
            <div  v-for="item in list_">
	            <div class="list-group">
	                <a href="#" class="list-group-item active">
	                    <h4 class="list-group-item-heading">
	                    	问题      {{item.type==1010?'单选':''}}{{item.type==1020?'多选':''}}{{item.type==1030?'判断':''}}
	                    </h4>
	                </a>
	                <a href="#" class="list-group-item">
	                    <h4 class="list-group-item-heading">
	                        {{item.id}}、{{item.title}}
	                    </h4>                   
	                </a>
	            </div>
	
	            <div class="list-group">
	                <a href="#" class="list-group-item active">
	                    <h4 class="list-group-item-heading">
	                        答案
	                    </h4>
	                </a>
	                <a href="#" class="list-group-item">
	                    <h4 class="list-group-item-heading">
	                       {{item.answer}}
	                    </h4>     
	                </a>           
	            </div> 
            </div>
        </div>    
    </div>

vue ajax get

window.onload = function(){
var vm = new Vue({
    el:'#app',
    data:{
        list_:[], 
        title:''
    },
    methods:{
        searcher:function(){
        	 
        	this.list_=[];
            //发送get请求
            this.$http.get('http://qing.free.idcfengye.com/index/param?title='+this.title,{},{emulateJSON:true}).then(function(res){
                console.log(res.body);  
                var d=res.body;
                if(d.code==200){
                	if(d.data.length==0)alert('没有搜到~');
                	this.list_=d.data;
                	 
                }else{
                	 
                	alert('请求失败，请重试');
                	
                }
            },function(){
            	 
                alert('请求失败，请检查网络');
            });
        }
    }
});
}

vue 跨域

window.onload = function () {
new Vue({
    el: '#app',
    data: {
      list_:[], 
       title:''
    },
    methods: {
      searcher() {
        let url = 'http://qing.free.idcfengye.com/index/param';
        this.$http.jsonp(url, {
          params: {
             title:this.title
          },
          jsonp: 'cb'//jsonp默认是callback,百度缩写成了cb，所以需要指定下                     }
        }).then(res => {
        	if(res.body.length==0)alert('没有数据。。');
            this.list_=res.body;
             
        }).catch(err => {
        	console.log("------------------error----------");
		　　console.log(err)
		});
      }
    }
});
}

ssm后台返回jsonp格式的数据，注意cb

引入包 import org.codehaus.jackson.map.util.JSONPObject; 否则没有返回值

@ResponseBody
	@RequestMapping("/page")
	public JSONPObject page(@RequestParam(value="pageNo",defaultValue="1")int pageNo,HttpServletRequest request, HttpServletResponse response,HttpSession session,
			Model model,ACmg o,String cb) throws IOException {
		 PageHelper.startPage(pageNo,Sys.Common.pageSize," cts desc ");
    	 List<ACmg> li=cmgService.queryList(o);
    	 PageInfo<ACmg> pageInfo = new  PageInfo<ACmg>(li,Sys.Common.pageSize);
    	 model.addAttribute("pageInfo", pageInfo);
    	 model.addAttribute("o", o);
    	 
    	 
    	  JSONPObject j=new  JSONPObject(cb, pageInfo);
         return j;
		 
	}