美文网首页
JSONP_跨域

JSONP_跨域

作者: 大大的萝卜 | 来源:发表于2017-03-14 13:33 被阅读0次

    题目1: 什么是同源策略

    所谓同源是指,域名,协议,端口相同。假如没有同源策略,你现在打开了浏览器,在一 个窗口中打开了银行网站,在另外一个tab窗口中打开了一个恶意网站,而那个恶意网站挂了一个的专门修改银行信息的JavaScript,当你访问 这个恶意网站并且执行它JavaScript时,你的银行页面就会被这个JavaScript修改,后果会非常严重。

    本域指的是?
    同协议:如都是http或者https
    同域名:如都是http://jirengu.com/ahttp://jirengu.com/b
    同端口:如都是80端口

    如:
    http://jirengu.com/a/b.jshttp://jirengu.com/index.php (同源)

    不同源的例子:
    http://jirengu.com/main.jshttps://jirengu.com/a.php (协议不同)
    http://jirengu.com/main.jshttp://bbs.jirengu.com/a.php (域名不同,域名必须完全相同才可以)
    http://jiengu.com/main.jshttp://jirengu.com:8080/a.php (端口不同,第一个是80)

    需要注意的是: 对于当前页面来说页面存放的 JS 文件的域不重要,重要的是加载该 JS 页面所在什么域,也就是我们平常再script标签中能够引入其他域

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

    跨域顾名思义就是突破同源策略的限制,去不同的域下访问数据。 主要有如下几种实现形式:

    jsonp
    CORS:跨域资源共享(Cross-Origin Resource Sharing)
    降域
    postMessage()

    题目3: JSONP 的原理是什么

    1.首先在客户端注册一个callback, 然后把callback的名字传给服务器。
    2.服务器先生成 json 数据。
    3.然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.
    4.最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
    5.客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.

    题目4: CORS是什么

    跨域资源共享,简单来说就是指定哪些符合条件的域名下的请求是被接受的,其他的都阻止。

    实现方式是,当你使用XMLHttpRequest发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin,后台进行一系列处理,如果确定接受请求则在返回结果中加入一个响应头:Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含Origin 的值,如果有则浏览器会处理响应,我们就可以拿到响应数据,如果不包含浏览器直接驳回,这时我们无法拿到响应数据。

    题目5: 根据视频里的讲解演示三种以上跨域的解决方式

    JSONP方法:


    Paste_Image.png

    返回结果为:

    s Paste_Image.png

    CORS:

    Paste_Image.png Paste_Image.png

    跨域:

    Paste_Image.png Paste_Image.png Paste_Image.png

    PostMessage:

    Paste_Image.png Paste_Image.png

    相关文章

      网友评论

          本文标题:JSONP_跨域

          本文链接:https://www.haomeiwen.com/subject/qoyqnttx.html