JS高级十-CFANZ编程社区

前端开发程序

1.创建html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="student.js"></script>
</head>
<body>
   <center>
       <table id="maintable" border="1px" width="500px"></table>
   </center>
</body>
</html>

2.创建student.js
window.οnlοad=function(){
       var httpRequest=null;
       if(window.XMLHttpRequest){
           httpRequest=new XMLHttpRequest();
       }else{
           httpRequest=new ActiveXObject("Microsoft.XMLHTTP");
       }
       httpRequest.open("GET","http://localhost:8080/getStudent",true);
       httpRequest.send();
       httpRequest.onreadystatechange=function(){
       if(httpRequest.readyState==4 && httpRequest.status==200){
           var jsondata=httpRequest.responseText;
           var jsonobjarray=JSON.parse(jsondata);
           var tableobj=document.getElementById("maintable");
           var trstring="<tr><td>学号</td><td>姓名</td><td>年龄</td><td>地址</td></tr>";
           for(var i=0;i<jsonobjarray.length;i++){
               var jsonobj=jsonobjarray[i];
               var stuid=jsonobj.stuid;
               var stuname=jsonobj.stuname;
               var stuage=jsonobj.stuage;
               var stuaddress=jsonobj.stuaddress;
               var str="<tr><td>"+stuid+"</td><td>"+stuname+"</td><td>"+stuage+"</td><td>"+stuaddress+"</td></tr>";
               trstring=trstring+str;
           }
           tableobj.innerHTML=trstring;
           }
       }
}

问题：跨域---超出域名访问范围
Access to XMLHttpRequest at 'http://localhost:8080/getStudent' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方法:
修改服务器程序
   在src/main/java下面创建一个package
   “com.wangxing.filter”
   在这个包下创建一个java类"CORSFilter"---跨域的过滤器
package com.wangxing.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;

public class CORSFilter implements Filter {
   public CORSFilter() {
   }
   public void doFilter(ServletRequest request, ServletResponse response,
   FilterChain chain) throws IOException, ServletException {
   HttpServletResponse httpServletResponse = (HttpServletResponse) response;
   httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
   httpServletResponse
   .setHeader(
   "Access-Control-Allow-Headers",
   "User-Agent,Origin,Cache-Control,Content-type,Date,Server,withCredentials,AccessToken");
   httpServletResponse.setHeader("Access-Control-Allow-Credentials",
   "true");
   httpServletResponse.setHeader("Access-Control-Allow-Methods",
   "GET, POST, PUT, DELETE, OPTIONS, HEAD");
   httpServletResponse.setHeader("Access-Control-Max-Age", "1209600");
   httpServletResponse.setHeader("Access-Control-Expose-Headers",
   "accesstoken");
   httpServletResponse.setHeader("Access-Control-Request-Headers",
   "accesstoken");
   httpServletResponse.setHeader("Expires", "-1");
   httpServletResponse.setHeader("Cache-Control", "no-cache");
   httpServletResponse.setHeader("pragma", "no-cache");
   chain.doFilter(request, response);
   }
   public void init(FilterConfig fConfig) throws ServletException { }
   public void destroy() {}
}
   在src/main/webapp/WEB-INF/web.xml
   <filter>
        <filter-name>CorsFilter</filter-name>
        <filter-class>com.wangxing.filter.CORSFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>CorsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>