精灵商场项目(十一)--JS跨域问题

最新推荐文章于 2023-09-27 08:59:36 发布

冷潇丶

最新推荐文章于 2023-09-27 08:59:36 发布

阅读量153

点赞数

分类专栏：分布式电商项目

本文链接：https://blog.csdn.net/qq_42495388/article/details/103072588

版权

分布式电商项目专栏收录该内容

15 篇文章 1 订阅

订阅专栏

本文介绍了JS跨域问题，包括同源策略、跨域实现原理，重点讲解了JSONP的工作方式和应用场景，通过实例阐述了JSONP的调用和API实现，探讨了JSONP与CORS在解决跨域问题上的区别。

摘要由CSDN通过智能技术生成

一、JS跨域问题

1.1 HttpClient优化

利用浏览器解析JS,发起AJax请求,之后从后台服务器中获取数据

域名相同时可以实现访问
当域名与访问网址域名不同时,发现服务无法正常调用

后面的单点登录系统SSO将使用JSONP来实现跨域问题

1.2 同源策略

浏览规定:如果满足协议名称://域名:端口号等都相同时表示同域访问

但是如果上述条件中有一项不同.则表示跨域访问.浏览器不予解析返回值.(安全策略)

如下图是同源策略案例

在这里插入图片描述

1.3 跨域实现原理

利用javaScript中的src属性实现跨域.
定义回调函数.
将返回值结果进行特殊格式封装 callback(JSON数据)

传统跨域存在的问题:

发送跨域请求时利用javaScript中的src属性.这样的操作不通用.
自己手动定义回调函数.
返回的数据必须经过回调函数名称封装.但是名称如何保证一致

所以使用JSONP实现跨越

1.4 JSONP

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

利用

1.4.1 JSONP方式调用

可以利用传统ajax实行实现数据请求
利用js自动生成一个回调函数.并且名称随意,发送请求时自动携带回调函数名称. url?callback="XXXXXXXX"
动态获取回调函数名称,将数据进行封装 callback(JSON);

1.4.2 编辑JS实现跨域访问

<script type="text/javascript">
        $(function () {
            alert("测试访问开始!!!!!")
            $.ajax({
                url: "http://manage.jl.com/web/testJSONP",
                type: "get",				//jsonp只能支持get请求
                dataType: "jsonp",       //dataType表示返回值类型
                jsonp: "callback",    //指定参数名称
                jsonpCallback: "hello",  //指定回调函数名称
                success: function (data) {   //data经过jQuery封装返回就是json串
                    alert(data.id);
                    alert(data.name);
                }
            });
        })
    </script>

1.4.2 API实现JSONP访问

调用JSONPObject(String function, Object value)方法

function为回调函数名称;value 为返回的对象数据

这个API底层实现了 :

1.将对象转换为JSON : String json = ObjectMapperUtil.toJSON(itemDesc);

2.拼接字符串 : callback+"("+json+")"

//利用API实现JSONP跨域访问
	@RequestMapping("/web/testJSONP")
	public JSONPObject testJSONP(String callback) {
		ItemDesc itemDesc = new ItemDesc();
		itemDesc.setItemId(10001L).setItemDesc("商品详情信息!!!!!!");
		return new JSONPObject(callback, itemDesc);
	}