一、概念
1.什么是跨域,跨域是浏览器安全机制,其实就是说你请求访问的域名与ajax请求地址不一致,浏览器会直接无法返回请求结果。
二、跨域的例子展示
1.项目demotesta
1.1.目录结构
1.2.pom.xml
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.41</version>
</dependency>
1.3.FormServlet.java
@WebServlet("/FromServlet")
public class FromServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String userName = req.getParameter("userName");
JSONObject jsonObject = new JSONObject();
jsonObject.put("userName", userName);
resp.getWriter().println(jsonObject.toJSONString());
}
}
2.项目demotestb
2.1.项目结构
2.2.pom.xml
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency>
2.3.b.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>B网站访问</title>
</head>
<script type="text/javascript"
src="./js/jquery-1.9.1.min.js?t=2017-07-27"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type : "get",
async : false,
url : "http://a.a.com/a/FromServlet?userName=644064",
dataType : "json",
success : function(data) {
alert("获取结果:"+data["userName"]);
},
error : function() {
alert('fail');
}
});
});
</script>
<body>
<img alt="" src="http://a.a.com/a/imgs/log.png">
</body>
</html>
3.结果展示(demotestb项目中的页面去访问demotesta项目中的接口地址,这样的话你就理解开篇的第一句话的意思了,这就是跨域)
看下控制台的信息 (ajax的跨域问题)
三、第一种方式解决跨域
1.添加header请求头去解决(后端解决问题)
1.1.在demotesta项目中的FromServlet.java中添加
@WebServlet("/FromServlet")
public class FromServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String userName = req.getParameter("userName");
JSONObject jsonObject = new JSONObject();
jsonObject.put("userName", userName);
resp.getWriter().println(jsonObject.toJSONString());
//允许浏览器跨域问题允许所有的
resp.setHeader("Access-Control-Allow-Origin", "*");
}
}
1.2.访问结果
1.3.结果出来了,问题解决
四、第二种方式解决跨域
1.jsonp解决跨域问题,只支持get请求,不支持post请求,在demotestb项目中
1.1.b.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>B网站访问</title>
</head>
<script type="text/javascript"
src="./js/jquery-1.9.1.min.js?t=2017-07-27"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type : "get",
async : false,
url : "http://a.a.com/a/FromServlet?userName=644064",
dataType : "jsonp",//数据类型为jsonp
jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数
success : function(data) {
alert("获取结果:"+data["userName"]);
},
error : function() {
alert('fail');
}
});
});
</script>
<body>
<img alt="" src="http://a.a.com/a/imgs/log.png">
</body>
</html>
1.2.FromServlet.java
@WebServlet("/FromServlet")
public class FromServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String userName = req.getParameter("userName");
JSONObject jsonObject = new JSONObject();
jsonObject.put("userName", userName);
String jsonpCallback = req.getParameter("jsonpCallback");
resp.getWriter().println(jsonpCallback+"("+jsonObject.toJSONString()+")");
}
}
1.3.结果访问
五、第三种方式解决跨域
1. 使用HttpClinet转发进行转发(在demotestb项目中)
1.1.项目结构
1.2.pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.ysfj</groupId>
<artifactId>demotestb</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.4</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.httpcomponents/httpclient -->
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
<version>4.4.1</version>
</dependency>
</dependencies>
</project>
1.2.ToFormServlet.java
@WebServlet("/ToFromServlet")
public class ToFromServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 创建默认连接
CloseableHttpClient httpClient = HttpClients.createDefault();
// 创建get请求
HttpGet httpGet = new HttpGet("http://a.a.com/a/FromServlet?userName=" + req.getParameter("userName"));
CloseableHttpResponse response = httpClient.execute(httpGet);
int code = response.getStatusLine().getStatusCode();
// 获取状态
System.out.println("http请求结果:" + code);
if (code == 200) {
String result = EntityUtils.toString(response.getEntity());
System.out.println(result);
resp.getWriter().print(result);
response.close();
httpClient.close();
// 将string转换html框架
}
}
}
1.3.b.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>B网站访问</title>
</head>
<script type="text/javascript"
src="./js/jquery-1.9.1.min.js?t=2017-07-27"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type : "get",
async : false,
url : "http://b.b.com/b/ToFromServlet?userName=644064",
dataType : "json",
success : function(data) {
alert("获取结果:"+data["userName"]);
},
error : function() {
alert('fail');
}
});
});
</script>
<body>
<img alt="" src="http://a.a.com/a/imgs/log.png">
</body>
</html>
1.4.访问结果
六、第四种方式解决跨域
1.nginx的反向代理解决跨域
1.1.nginx的配置
1.2.本地hosts配置
1.3.项目目录
1.4.代码(跨域demotestb项目中的b.jsp访问demotesta项目的FormServlet.java)
1.4.1.b.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>B网站访问</title>
</head>
<script type="text/javascript"
src="./js/jquery-1.9.1.min.js?t=2017-07-27"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type : "get",
async : false,
url : "http://ky.chenmingxu.com/A/FromServlet?userName=644064",
dataType : "json",
success : function(data) {
alert("获取结果:"+data["userName"]);
},
error : function() {
alert('fail');
}
});
});
</script>
<body>
<img alt="" src="http://a.a.com/a/imgs/log.png">
</body>
</html>
1.4.2.FormServlet.java
@WebServlet("/FromServlet")
public class FromServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String userName = req.getParameter("userName");
JSONObject jsonObject = new JSONObject();
jsonObject.put("userName", userName);
resp.getWriter().println(jsonObject.toJSONString());
}
}
1.4.3.测试结果
总结:这样也是可以完成跨域的解决问题
七、结束
希望能帮助到你们!!!