ajax跨域问题解决

报错信息

已拦截跨源请求：同源策略禁止读取位于 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