JSONP

题目1: 什么是同源策略

浏览器出于安全性能的考虑,只允许与同源接口进行数据传递,不同源的客户端本在没有明确授权的情况下,不能读写对方的资源。

同源指的是:

  • 同协议:如http,https,file
  • 同域名:第一个 // 之间 /,就是网站的域名。
  • 同端口:http://jirengu.com:80/ 80就是端口号

题目2: 什么是跨域?跨域有几种实现形式

不同源的网站之前相互传递数据
跨域的实现形式:

  1. JSONP
  2. CORS
  3. 降域
  4. postMessage

题目3: JSONP 的原理是什么

JSONP的原理
利用<script src="xxx">发出get请求,然后浏览器对于这个src=''xxx'' 并不会监视,所以,我们就可以去发送请求,请求拿到的数据会被当做JS文件来运行,这个时候,对方只需要将所需要的数据用浏览器也支持,JS也能支持的语言格式传递,我们就能获得相应数据,而JSON语言是既符合这两个特点,使用起来也方便,所以叫JSONP.

JSONP实现的步骤

  1. 首先要定义好回调函数。
  2. 发出src的请求,然后,前端和别的网站的后端需要约定好 查询参数,比如都叫callback=showme
  3. 后端接收请求,也制定好了callback要传递的回去的数据,并且,要将前端的函数名字一并传递过去。因为,如果没有传递过去,前端的js可能并不能正常运行。
    例如:


    router.js

上述图中outseacher就是 callback的值,也就是前端的函数名。
4 . 前端拿到数据,按照事先制定好的函数,处理数据。

4.CORS是什么

cors是可以理解为加强版的Ajax。
既然Ajax不错,用起来也方便,我们就可以制定在双方都同意的情况下,允许跨域来传递数据。
Ajax运用XMLHttpRuquest的时候,服务器在请求的头部加了一个origin.
如果这个网站同意来自不同源的请求的时候,可以在回应的头部写上,
Access-Control-Allow-Origin

cors

例如这样,在回应信息里面加上'Access-Control-Allow-Origin' 就可以允许别人来获得信息了,当然,也可以指定只接受来自某个网站的请求,'*'代表任意。

5.用三种以上不同的方式来演示跨域过程。

1 . JSONP
代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>成绩查询</title>
    <style type="text/css">
        button {
            color:red;
            border:1px solid red;
            display:inline-block;
            padding:10px 10px 5px 5px;
        }
    </style>
</head>
<input type="text" name="haha">
<div class="grade"></div>
<button>查询</button>
<script>
    var $=function(x){
        return document.querySelector(x)
    }
    $('button').addEventListener('click',function(){
        var script=document.createElement('script')
        script.src='http://sys521.com:8080/seachgrade?callback=seach'
        document.head.appendChild(script)
        document.head.removeChild(script)
    })
    function seach(username){
            var arr=[]
            for (key in username){
                arr.push(key)
            }
            console.log(arr)
            var b=arr.indexOf($('input').value)
            if(b===-1){
                return $('.grade').innerText= $('input').value+'是谁'
            }else{
                return $('.grade').innerText=username[arr[b]]
            }
    }
</script>
</body>
</html>

mock sever

router.get('/seachgrade',function(req,res){
    var grade={'小明':100,'小刚':98,'小红':97}
    var outseacher= req.query.callback;
    if(outseacher){
        res.send(outseacher+'('+JSON.stringify(grade)+')')
    }else{
        res.send(grade)
    }
})
JSONP效果演示
  1. CORS
    代码:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>输入验证码</title>
    <style>
        .getcode,input {
            display:inline-block;
        }
        .getcode{
            border:1px solid;
            word-spacing: 4px;
        }
    </style>
</head>
<body>
<span>请输入验证码:</span>
<input type="text">
<span>验证码</span>
<div class="getcode"></div>
<button>提交</button>
<script>
    var input=document.querySelector('input')
    var getcode=document.querySelector('.getcode')
    var btn=document.querySelector('button')
    input.addEventListener('focus',function(){
        var xhr=new XMLHttpRequest()
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4 && (xhr.status===200 || xhr.status === 304)){
                var result=JSON.parse(xhr.responseText)
                getcode.innerText=result.join('')
            }else{
                getcode.innerText='断网了'
            }
        }
        xhr.open('get','http://sys521.com:8080/getCode',true)
        xhr.send()
    })
    btn.onclick=function(){
        if(input.value===getcode.innerText){
            alert('答对了')
        }else{
            alert('error')
        }
    }
</script>
</body>
</html>

mock sever

app.get('/getCode',function(req,res){
    var a=[]
    var b=[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']
    for(var i=0;i<4;i++){
        var c=Math.floor(Math.random()*15)
        a.push(b[c])
    }
    res.header('Access-Control-Allow-Origin','*')
    res.send(JSON.stringify(a))
})
CORS

3 .降域
代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="ct">
    <input class="aa" type="text" placeholder="a.lpf123.com/a.html">
</div>
<iframe src="http://b.lpf123.com:8080/b.html">
</iframe>
<script>
    document.querySelector('.aa').addEventListener('input', function(){
        window.frames[0].document.querySelector('input').value=this.value
    })
    document.domain= 'lpf123.com'
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text" placeholder="b.lpf123.com">
<script>

    document.querySelector('input').addEventListener('input', function(){
        window.parent.document.querySelector('input').value = this.value;
    })
    document.domain ='lpf123.com'
</script>

</body>
</html>
降域
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本节内容:实现跨域常用的两种方式 —— JSONP 和 CORS 零:跨域报错展示 在非同源情况下,调用 Ajax...
    NathanYangcn阅读 3,275评论 2 12
  • 1.什么是同源策略 同源策略(Same origin Policy):浏览器出于安全方面的考虑,只允许与本域下的接...
    hellowade阅读 194评论 0 0
  • Section1、为什么要跨域? 自古以来(1995年起),为了用户的信息安全,浏览器就引入了同源策略。那么同源策...
    不去解释阅读 582评论 0 0
  • 题目1: 什么是同源策略 浏览器出于安全考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,...
    saintkl阅读 243评论 0 0
  • 1: 什么是同源策略 最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源",所谓...
    好奇而已阅读 311评论 0 0