一个简单的html测试tomcat本地服务器的问题处理一

一、服务端代码

	@RequestMapping("getStudent")
	public void getStudent(HttpServletRequest req,HttpServletResponse resp){
		try {
			req.setCharacterEncoding("utf-8");
			
		} catch (UnsupportedEncodingException e1) {
			// TODO Auto-generated catch block
			e1.printStackTrace();
		}
		resp.setContentType("text/html;charset=utf-8");
		String name=req.getParameter("name");
		String sex=req.getParameter("sex");
		byte[] b;//使用axios交互时需要使用终极转码，使用ajax则不需要中及转码，值需要设置request编码为utf-8
		try {
			b = name.getBytes("ISO-8859-1");
			name=new String(b,"utf-8");
			b = sex.getBytes("ISO-8859-1");
			sex=new String(b,"utf-8");
		} catch (UnsupportedEncodingException e1) {
			// TODO Auto-generated catch block
			e1.printStackTrace();
		}//用tomcat的格式（iso-8859-1）方式去读。  
		System.out.println("姓名："+name+"\t性别："+sex);
		
		try {
			PrintWriter out=resp.getWriter();
			out.print("[{lattice:\"格子\"},{lattice:\"222\"}]");
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}

二、html文件测试代码

	
   
   
	
	<script src="axios.js"></script>
	<script src="jquery-3.1.1.js"></script>


	点我
	<script>
	function on(){
		axios.get('http://127.0.0.1:8080/vue_js/student/getStudent.do', {
                    		 params: {
                    		 	name:"格子",
                    		 	sex:'男'
                    		 }//此处只能传json对象（已经构造完成的或者在此处构造json对象）
                    	  })
                    	  .then(function (response) {
                    	    console.log(response);
                    	    //回传的是一个json对象,包括data，status
                    	    //{data: "[{lattice:"格子"},{lattice:"222"}]", status: 200, statusText: "OK", headers: Object, config: Object…}


                    	    var json=eval(response.data);
                    	    $.each(json,function(){
                    	    	console.log(this.lattice);
                    	    });
                    	    
                    	    alert(response.data);
                    	  })
                    	  .catch(function (response) {
                    	    console.log(response);
                    	  });
                    	  	}

	</script>

三、出现问题

在Chrome中按下F12查看控制台输出信息

XMLHttpRequest cannot load http://127.0.0.1:8080/vue_js/student/getStudent.do?name=%E6%A0%BC%E5%AD%90&sex=%E7%94%B7.

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

此时，本地请求能够到达服务端，服务端能够打印出请求提交的name以及sex，但是本地浏览器query无法正常接收来自服务端返回的数据。