前端开发程序
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>