ajax跨域问题解决

报错信息

已拦截跨源请求：同源策略禁止读取位于 http://localhost: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://localhost:8080/hello/detail/" + kw, 
					type: "GET",
					dataType: "jsonp",
					success: function(data){
						//alert(data.sname);
						$("#result").text(JSON.stringify(data));
					},
				});
		}
	);
})

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配置热部署

微信扫一扫关注公众号

点击链接加入群聊

https://jq.qq.com/?_wv=1027&k=5eVEhfN
软件测试学习交流QQ群号：511619105