ajax 跨域获取数据

跨域问题的出现，是由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

ajax 跨域获取数据

猜你喜欢