跨越相关问题

最新推荐文章于 2024-08-23 15:54:50 发布

是苹果没错了

最新推荐文章于 2024-08-23 15:54:50 发布

阅读量111

点赞数

文章标签： java jsonp ajax跨域问题

本文链接：https://blog.csdn.net/qq_48322394/article/details/113939466

版权

同源策略

为什么有跨域问题呢，首先我们来了解同源策略
当用户访问页面时并且页面发起Ajax请求时.要求协议://域名:端口号必定相同.
同域访问
如果相同则满足同源策略. 网络可以正常的通讯.
跨域访问
当协议://域名:端口有一条不满足,则该请求为跨域请求. 如果为跨域请求则浏览器不予解析返回值.

在这里插入图片描述
同源策略总结
执行者: 只有浏览器参与执行,才会有同源的问题…
策略约定: 协议://域名:端口三者缺一不可.
跨域问题发起者: Ajax请求. 如果没有ajax参与不能称之为跨域.
后果: 如果跨域了,则程序依然可以正常的执行.但是客户端拿不到结果的. 出于安全性考虑.浏览器不予解析返回值.
在这里插入图片描述

跨越问题解决

JSONP

JSONP介绍
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的

注意事项: JSONP如果需要使用一般用来获取资源GET类型.而不是提交数据.(POST类型)
原因: javaScript中的src属性只能支持GET请求类型.

JSONP原理说明

1).基于javaScript中的src属性实现远程数据访问.

<script type="text/javascript" src="http://manage.jt.com/test.json"></script>

2).自定义回调函数
在这里插入图片描述
3).将返回值进行特殊的格式封装
语法: callback(JSON数据)

关于JSONP优化

问题:
1). 常规的远程请求,还是采用ajax形式居多.能否将jsonp方法与Ajax结合呢?
2). 每次发起JSONP请求时,都需要自定义回调函数比较繁琐.
3). 如果前后端需要完成调用,则需要统一回调函数名称. 最好的方式可以将回调函数当做参数进行传递. callback(JSON)

<!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串

				console.log("回调函数执行成功!!!!!")
			}	
		});	
	})
</script>
</head>
<body>
	<h1>JSON跨域请求测试</h1>
</body>
</html>

关于JSONP后端业务调用



@RestController
public class JSONPController {

    //返回值要求:  callback(json串)
   @RequestMapping("/web/testJSONP")
    public String jsonp(String callback){
        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(1000L).setItemDesc("JSONP调用成功!!!")
                .setCreated(new Date()).setUpdated(new Date());
        String json = ObjectMapperUtil.toJSON(itemDesc);
        return callback + "( " + json + ")";
    }

}

关于JSONP后端业务调用(二)

在这里插入图片描述

CORS

CORS介绍(跨域资源共享)

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的响应头信息.如果后端服务器允许资源共享则会在响应头中标识是否允许访问.
因此，实现CORS通信的关键是服务器