Ajax跨域问题
Ajax跨域问题
1、域
- 协议 + IP + 端口
2、跨域
当协议、IP、端口三个都相同时，这时是同域，就不存在跨域
当协议、IP、端口三个其中一个不相同时，且请求是Ajax的方式，那么就会出现跨域问题。
跨域问题会导致响应失败【请求方得不到目标方的响应结果】，是由浏览器的同源策略引起的。
同源策略：（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。
3、一个注解@CrossOrigin
@CrossOrigin("请求方的URL")
上面注解写在被请求方
4、案例演示
4.1 创建两个应用
4.2 在A应用中通过Ajax去访问B应用的一个接口
- B应用接口
@RestController
public class Demo001Controller {
@RequestMapping("/test001")
public String test001(HttpSession session, HttpServletResponse response){
System.out.println("Demo1Controller test001");
session.setAttribute("name", "Baby");
return "success";
}
@RequestMapping("/test002")
public String test002(HttpSession session){
System.out.println("Demo1Controller test002");
Object name = session.getAttribute("name");
System.out.println("name = " + name);
return "success";
}
}
- A应用的Ajax
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>index.jsp</title>
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<input type="button" onclick="originTest();" value="演示跨域问题"/>
</body>
<script>
function originTest() {
$.ajax({
//B应用的接口
url : "http://localhost:82/test001",
type : "get",
success : function (result) {
console.log(result);
}
});
}
</script>
</html>
- 会出现如下错误【没有解决跨域问题时】
| 跨域问题 |
|---|
 |
4.3 解决跨域 @CrossOrigin
- 在B应用的Controller类上标记@CrossOrigin("请求方URL")
- 允许请求方跨域时携带Cookie，在A应用的Ajax中配置一个凭证
- 允许响应方把Cookie再带回浏览器，在B应用的接口中设置一个响应头
4.3.1 B应用Controller
@RestController
@CrossOrigin("http://localhost:81") //解决跨域
public class Demo001Controller {
@RequestMapping("/test001")
public String test001(HttpSession session, HttpServletResponse response){
System.out.println("Demo1Controller test001");
session.setAttribute("name", "Baby");
//允许响应把跨域请求携带的cookie带过去
response.addHeader("Access-Control-Allow-Credentials", "true");
return "success";
}
@RequestMapping("/test002")
public String test002(HttpSession session){
System.out.println("Demo1Controller test002");
Object name = session.getAttribute("name");
System.out.println("name = " + name);
return "success";
}
}
4.3.2 A应用的Ajax
<script>
function originTest() {
$.ajax({
url : "http://localhost:82/test001",
type : "get",
//===============加入如下配置即可===============
xhrFields: {
// 跨域携带cookie
withCredentials: true
},
//==============================
success : function (result) {
console.log(result);
}
});
}
</script>
- 跨域
http://127.0.0.1:81/user/query
http://localhost:81/order/save
http://192.168.20.166:80/user/query
http://192.168.20.167:80/order/save
http://192.168.20.166:80/user/query
https://192.168.20.167:80/order/save
