跨域问题的出现,是由html部署到一台服务器上,而java在另一台服务器上,java返回的数据html页面上的java获取不到。
现在在两台设备上分别部署html和java,192.168.0.1部署html, 192.168.0.2上部署java.两个都放到tomcat 容器里启动。
此时java里面的代码是:(只是简单的获取一些数据返回到前台)
@RequestMapping(value="getData",method=RequestMethod.GET)
@ResponseBody
public String getData(ServletRequest req, ServletResponse res){
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest reqs = (HttpServletRequest) req;
response.setHeader("Access-Control-Allow-Origin","*");
String nameList[]={
"赵", "钱","'孙", "李","周", "吴", "郑", "王", "冯", "陈", "褚", "卫", "蒋", "沈", "韩", "杨", "朱", "秦", "尤", "许", "何", "吕", "施", "张",
"孔", "曹", "严", "华", "金", "魏", "陶", "姜", "戚", "谢", "邹", "喻", "柏", "水", "窦", "章", "云", "苏", "潘", "葛", "奚", "范", "彭", "郎"
};
String[] seriesData;
String[] name;
Random randrom = new Random();
List<tuBiao> nameList1 = new ArrayList<tuBiao>();
tuBiao tb = new tuBiao();
tb.setName("李斯");
tb.setValue(randrom.nextInt(500)+1);
nameList1.add(tb);
tuBiao tb1 = new tuBiao();
tb1.setName("张三");
tb1.setValue(randrom.nextInt(500)+1);
nameList1.add(tb1);
tuBiao tb2 = new tuBiao();
tb2.setName("王无");
tb2.setValue(randrom.nextInt(500)+1);
System.out.println("math"+randrom.nextInt(500)+1);
nameList1.add(tb2);
tuBiao tb3 = new tuBiao();
tb3.setName("赵大");
tb3.setValue(randrom.nextInt(500)+1);
nameList1.add(tb3);
tuBiao tb4 = new tuBiao();
tb4.setName("钱多");
tb4.setValue(randrom.nextInt(500)+1);
nameList1.add(tb4);
tuBiao[] tuBiao = {tb1,tb2,tb3,tb4};
// String userStr = JSON.toJSONString(tuBiao);
String userStr = JSON.toJSONString(nameList1);
System.out.println(new Date());
System.out.println("1111222"+userStr);
// String jj = "handleResponse("+userStr+")";
return userStr;
}
html中的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现JSONP</title>
</head>
<body>
<div id="mydiv">
<button id="btn">点击</button>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.jsonp.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
async : true,
url : "http://192.168.0.2:8080/test/getData",
//url:"https://api.douban.com/v2/book/search?q=javascript&count=1",
type : "post",
dataType : "json", // 返回的数据类型,设置为JSONP方式
success: function(data){
alert(data[0].name);
}
});
});
});
</script>
</html>
此时启动两台设备上的tomcat容器,访问该html页面,浏览器会提示由于跨域的原因获取不到java返回的数据。
提示信息:
二、解决跨域的问题。
1、下载cors-filter-<version>.jar和java-property-utils-<version>.jar两个jar文件,并将其放在web服务器的classpath路径下,例如tomcat的lib。
cors-filter-2.4.jar java-property-utils-1.9.1.jar
2、在web.xml中添加CorsFilter过滤器
<!-- 设置可以跨域 -->
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
3、重启Web服务器即可。
注:其他的服务跨域问题解决(Nginx服务器、Apache服务器、IIS服务器)
https://blog.csdn.net/xiaokui_wingfly/article/details/51496134