跨域实现策略

最新推荐文章于 2024-01-12 20:46:37 发布

光头小小强007

最新推荐文章于 2024-01-12 20:46:37 发布

阅读量217

点赞数

分类专栏：框架文章标签： java ajax

本文链接：https://blog.csdn.net/m0_46159525/article/details/107871712

版权

框架专栏收录该内容

7 篇文章 0 订阅

订阅专栏

同源策略

同源策略介绍

说明:在浏览器中发起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是不是跨域

该操作就是远程的资源加载.

光头小小强007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
跨域实现策略

同源策略同源策略介绍说明:在浏览器中发起ajax请求时,必须满足三大要素.否则浏览器不予解析返回值.要素:请求协议名称 http/https请求域名请求端口号如果上述三项都相同,则为同域访问.满足同源策略的要求.如果上述三项有一项不满足,则违反了同源策略,为跨域访问.浏览器不予解析返回值.关于同源策略的说明跨域实现策略-jonspJSONP介绍JSONP原理说明利用javaScript中的src属性实现跨域.<script type="text/
复制链接

扫一扫