同源与跨域

最新推荐文章于 2023-10-16 17:00:25 发布

zzh1918

最新推荐文章于 2023-10-16 17:00:25 发布

阅读量368

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/qq_37860930/article/details/79181133

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

同源策略
同源策略指的是服务器不能访问不同源服务器上的资源
同源指的是协议、端口、域名都相同
不同源就是协议、端口、域名有一项不同就不同源

同源的限制

Cookie、LocalStorage 和 IndexDB 无法读取。
DOM 无法获得。
AJAX 请求不能发送。

跨域

jsonp
WebSocket
CORS
服务器代理

jsonp
一般有src属性的标签都可以跨域访问资源，如srcipt、img、iframe等。jsonp就是利用srcipt来跨域的。
script加载的是js代码，所以利用script跨域就要将数据封装成js。数据封装成js那不就是json吗。另外获取数据后还要进行处理，我们定义一个处理数据的函数，并将函数作为回调函数以参数的形式添加到url中发送给服务器，服务器再将json作为回调函数的参数返回，这样script加载js后就直接执行了。

//动态添加script
function addScript(url){
    var script=document.createElement('script');
    script.setAttribute('src', url);
    document.getElementsByTagName('head')[0].appendChild(script);
}
//跨域访问，此链接是百度的搜索建议，具体的js代码是foo(数据)，当加载完代码就是执行这个函数
window.onload=function(){
    addScript('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=foo');
}
//用来处理数据的回调函数
function foo(data){
    console.log(data);
}

jquery封装了jsonp

<html>
<head>
    <title>我是B页面</title>
</head>
<body>
    <button id="btn">button</button>
<script src="jquery-3.2.1.js"></script>
<script>
    $(function(){
        $('#btn').click(function(){
            $.ajax({
                type:'get',
                dataType:'jsonp',    
                url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a',
                jsonp:'cb', //替代URL 参数里的 "callback" 部分，cb=?会传递给服务器
                success:function(res){
                    console.log(res)
                }
            });
        });
    });
</script>
</body>
</html>

这里写图片描述
jquery会随机生成一个回调函数名发送给服务器，jquery自动帮你生成回调函数并把数据取出来供success属性方法来调用。jsonpCallback选项可以为jsonp请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。

跨域资源共享（CORS）
jsonp实现跨域
服务器代理：浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的资源再返回给客户端。

参考链接：挺好的jsonp文章、百度搜索框
阮一峰的博客：浏览器同源政策及其规避方法、跨域资源共享 CORS 详解

zzh1918

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
同源与跨域

同源策略同源策略指的是服务器不能访问不同源服务器上的资源同源指的是协议、端口、域名都相同不同源就是协议、端口、域名有一项不同就不同源同源的限制 Cookie、LocalStorage 和 IndexDB 无法读取。DOM 无法获得。AJAX 请求不能发送。跨域jsonpWebSocketCORS服务器代理jsonp 一般有src属性的标签都可...
复制链接

扫一扫