报错信息
已拦截跨源请求:同源策略禁止读取位于 http://192.168.2.105:8080/hello/detail/1001 的远程资源。(原因:CORS 头缺少 ‘Access-Control-Allow-Origin’)。
解决办法
使用jsonp解决js跨域的问题
JS代码
$(function(){
$("#search").click(
function(){
var kw = $("#keyword").val();
if(kw == "" || kw == null || kw == undefined){
console.log("keyword为空");
return;
}
$.ajax(
{
url: "http://192.168.2.105:8080/hello/detail/" + kw,
type: "GET",
dataType: "jsonp",
success: function(data){
try {
var input = eval('(' + JSON.stringify(data) + ')');
}
catch (error) {
return alert("Cannot eval JSON: " + error);
}
var options = {
collapsed: true,
rootCollapsable: true,
withQuotes: false,
withLinks: true
};
$('#result').jsonViewer(input, options);
//alert(data.sname);
//$("#result").text(JSON.stringify(data,null,2));
},
});
}
);
})
Java代码
package com.yangzc.controller;
import com.fasterxml.jackson.databind.util.JSONPObject;
import com.yangzc.entity.Student;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.Date;
@Controller
@RequestMapping("/hello")
public class HelloWorld {
@RequestMapping("/welcome")
public String sayHi(Model model){
model.addAttribute("message", "欢迎使用Spring MVC!");
return "hello";
}
@RequestMapping("/detail/{sno}")
@ResponseBody
public Object detail(@PathVariable Integer sno, @RequestParam(required = false) String callback){
Student stu = new Student(sno,"刘亦菲",new Date(),false,null);
if(callback==null||callback.equals("")){
return stu;
}
//
//MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(stu);
//mappingJacksonValue.setValue(callback);
return new JSONPObject(callback,stu);
}
}
测试结果
项目开源地址
https://github.com/yangzc23/jsonpdemo
参考资料
[01] jsonp 后台的springmvc写法
[02] 来说说SpringMVC + JSONP的跨域请求
[03] SpringMVC中JSONP的基本使用
[04] 10分钟学会js处理json常用方法
[05] jsonp原理详解——终于搞清楚jsonp是啥了
[06] SpringMVC对日期类型的转换
[07] SpringMVC返回JSON提示:HttpMessageNotWritableException: No converter found for return value of type
[08] maven添加tomcat插件
[09] Maven之将Maven项目部署到Tomcat7
[10] springmvc的@RequestParam注解带参数和不带参数的区别?
[11] web.xml文件配置servlet时web-app标签报错
[12] SpringMVC配置与使用
[13] 使用idea基于maven创建SpringMVC项目
[14] JSP接收不到Controller返回的Model
[15] Idea配置热部署
[16] 开源项目json-viewer
[17] jQuery格式化显示json数据
[18] HTML显示json字符串并且进行格式化
[19] Jsonp请求只能是GET不能是POST
微信扫一扫关注公众号
点击链接加入群聊
https://jq.qq.com/?_wv=1027&k=5eVEhfN
软件测试学习交流QQ群号:511619105