同源策略
同源策略介绍
说明:在浏览器中发起ajax请求时,必须满足三大要素.否则浏览器不予解析返回值.
要素:
-
请求协议名称 http/https
-
请求域名
-
请求端口号
如果上述三项都相同,则为同域访问.满足同源策略的要求.
如果上述三项有一项不满足,则违反了同源策略,为跨域访问.浏览器不予解析返回值.
关于同源策略的说明
跨域实现策略-jonsp
JSONP介绍
JSONP原理说明
- 利用javaScript中的src属性实现跨域.
<script type="text/javascript" src="http://manage.jt.com/test.json"></script>
- 自定义回调函数
/*定义回调函数 */
function hello(data){
alert(data.name);
}
- 将返回值结果进行特殊的格式封装
语法: 回调函数(JSON串)
hello({"id":"1","name":"tom"})
JSONP优化
JSONP问题描述
-
JSONP的调用需要人为的编辑javaScript标签不方便.
-
回调函数需要自己手动的定义,一点都不智能.
-
如何传递回调函数?? 让代码变得简单???
JSONP优化策略
-
利用传统的ajax形式封装JSONP的调用方式.
-
利用随机函数动态生成回调函数.
-
发起ajax请求时,携带回调函数的名称当做参数发给后端服务器.
http://xxxxx.xxx.com/xxxxx?callback=回调函数名称
jQuery实现JSONP
编辑JSONP.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONP测试</title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
alert("测试访问开始!!!!!")
$.ajax({
url:"http://manage.jt.com/web/testJSONP",
type:"get", //jsonp只能支持get请求
dataType:"jsonp", //dataType表示返回值类型
//jsonp: "callback", //指定参数名称
//#jsonpCallback: "hello", //指定回调函数名称
success:function (data){ //data经过jQuery封装返回就是json串
alert("ajax跨域成功!!!!!");
alert(data.id);
alert(data.name);
//转化为字符串使用
//var obj = eval("("+data+")");
//alert(obj.name);
}
});
})
</script>
</head>
<body>
<h1>JSON跨域请求测试</h1>
</body>
</html>
请求路径分析
编辑webJSONPContORller
@RestContORller
public class WebJSONPContORller {
/**
* url地址:
* http://manage.jt.com/web/testJSONP?callback=jQuery111108175936158972192_1591340174795&_=1591340174796
* 参数:
* callback=回调函数
* 返回值: callback(json)
*/
//@RequestMapping("/web/testJSONP")
public String testJSONP(String callback) {
ItemDesc itemDesc = new ItemDesc();
itemDesc.setItemDesc("测试数据");
itemDesc.setItemId(1000L);
String json = ObjectMapperUtil.toJSON(itemDesc);
//需要手动的拼接json串
return callback+"("+json+")";
}
@RequestMapping("/web/testJSONP")
public JSONPObject testJSONP2(String callback) {
ItemDesc itemDesc = new ItemDesc();
itemDesc.setItemDesc("测试数据");
itemDesc.setItemId(1000L);
return new JSONPObject(callback, itemDesc);
}
}
跨域实现策略-cors
cors介绍
CORS是一个W3C标准,全称是"跨域资源共享"(CORss-origin resource sharing)。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
总结:CORS当下主流浏览器都支持.CORS跨域通过浏览器添加请求头信息实现的.同时服务器必须实现cors的接口才能实现跨域访问.
编辑测试页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试JSON跨域问题</title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
/*$(){}结构必然是jQuery函数类库导入后才能正确执行*/
$(function(){ //是因为jQuery类库定义了该函数(函数名称),所以可以被人调用
alert("我执行了跨域访问");
//利用jQuery发起AJAX请求
$.get("http://manage.jt.com/cors.json",function(data){
alert(data.name);
})
})
</script>
</head>
<body>
<h1>JSON跨域请求测试</h1>
</body>
</html>
CORS实现跨域
@Configuration
public class CorsMVCConfig implements WebMvcConfigurer{
//重写关于服务器跨域访问的策略
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") //标识所有的请求可以跨域
.allowedOrigins("http://www.jt.com") //允许哪个网址访问
.allowedMethods("GET", "POST", "DELETE", "PUT", "OPTIONS","HEAD") //请求类型
.allowCredentials(true) //是否允许携带cookie
//1.如果需要进行跨域访问,首先试探性的发起请求.(询问)
//如果服务器允许跨域则在一定的时间之内无需再次试探 默认30分钟
.maxAge(3600); //校验请求的有效期
}
}
跨域总结
什么叫跨域
说明:浏览器解析页面ajax,发起ajax请求时,如果违反了同源策略,称之为跨域.
JSONP和HttpClient区别
1.JSONP是解决跨域问题方式 核心原理3步,借助了js的方式实现了跨域
2.HttpClient是java代码在运行时发起的http请求,不属于跨域问题.
javaScript是不是跨域
该操作就是远程的资源加载.