前端跨域
文章目录
跨域是什么
- 浏览器为了安全，做了一个同源限制
- 同源：协议、主机名、端口相同
- 当不满足下列任一要求时就会发生跨域
- 这里说的是 XMLHttpRequest 下的 AJAX 请求.
- 对于
<img> , <script>, <link> 等标签,就不存在跨域请求.(除非后台做了防盗链，比如QQ空间的图片。。。。)
为什么要跨域
- 当一个项目很大的时候，我们不可能把所有的文件丢在同一个服务器或同一个服务器软件中
解决方法
JSONP
- src不受跨域限制，比如script标签
- jsonp 跨域是利用在浏览器中,script标签是不受同源策略限制的特性.
- JSOP 处理跨域的原理是，利用某些 html 标签不受同源策略的限制，来发送请求。比如 img script
- 只支持get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>core</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function callback(data) {
console.log(data);
}
</script>
<script src="http://localhost:8080/core_test/servletTest01"></script>
</body>
</html>
public class ServletTest01 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
PrintWriter writer = resp.getWriter();
writer.print("callback( [{\"name\": \"zhangsan\",\"age\": 18},{\"name\": \"lisi\",\"age\": 19},{\"name\": \"wangwu\",\"age\": 20}] )");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
JQuery
ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>core</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$.ajax({
"url": "http://localhost:8080/core_test/servletTest01",
"dataType": "jsonp",
"type": "get",
jsonp: "callback",
success: function(data) {
console.log(data);
}
})
</script>
</body>
</html>
public class ServletTest01 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String callback = req.getParameter("callback");
System.out.println(callback);
PrintWriter writer = resp.getWriter();
writer.print(callback + "( [{\"name\": \"zhangsan\",\"age\": 18},{\"name\": \"lisi\",\"age\": 19},{\"name\": \"wangwu\",\"age\": 20}] )");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
getJson
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>core</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$.getJSON("http://localhost:8080/core_test/servletTest01?callback=?",function(data) {
console.log(data);
})
</script>
</body>
</html>
CORS同源策略
- 当进行跨域请求时会发生什么呢
- 跨域请求发出.
- 请求确实发送到了服务器.
- 服务器把数据返回到浏览器.
- 但是服务器返回的响应头里,没有告诉浏览器哪个域名可以访问这些数据(没有设置 Access-Control-Allow-Origin)
- 于是浏览器就把这个数据丢弃.也就无法获取到数据.
- 这时,需要后台在相应头里加上一个
Access-Control-Allow-Origin:* 即完成跨域数据获取
Access-Control-Allow-Origin:*会解除所有的跨域限制，这里，任何一个人都可以请求到你的后端数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>core</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$.ajax({
"url": "http://localhost:8080/core_test/servletTest01",
"dataType": "json",
"type": "get",
success: function(data) {
console.log(data);
}
})
</script>
</body>
</html>
public class ServletTest01 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
PrintWriter writer = resp.getWriter();
writer.print("[{\"name\": \"zhangsan\",\"age\": 18},{\"name\": \"lisi\",\"age\": 19},{\"name\": \"wangwu\",\"age\": 20}] ");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}
