zoukankan      html  css  js  c++  java
  • 彻底理解跨域解决方案JSONP

    什么是同源策略?

    同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。

    所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器

    执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。

     JSON与JSONP

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
    JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。--来源百度
    JSONP就像是JSON+Padding一样(Padding这里我们理解为填充)

    理解跨域(本地模拟跨域情形)

    新建文件夹项目A与项目B

    HBuilder在chrome浏览器中打开A/sample.html,得到下面路径:

    http://127.0.0.1:8020/A/sample.html

    WebStorm2016.3.1在chrome浏览器中打开B/samp.html,得到下面路径:

    http://localhost:63342/B/sample.html?_ijt=f9l1pulrqoemklhrfr39lbdn7s

    现在/A/sample.html访问B中的test.js,显然是跨域了。

    http://localhost:63342/B/test.js直接引入/A/sample.html里面:

    再次刷新http://127.0.0.1:8020/A/sample.html时,WebStorm图标会显示黄色提示你打开:

    选择Copy authorization URL to clipboard复制新生成的webstorm小型服务器下的test.js地址,复制粘贴到路径:

    这样,再次刷新http://127.0.0.1:8020/A/sample.html的时候,test.js里面的内容就可以访问了!

    创建一个真正的前后端交互情景

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>testA</title>
        </head>
        <body>
            
            <script>
                function addScriptTag(src) {
                    var ele = document.createElement('script');
                    ele.type = 'text/javascript';
                    ele.src = src;
                    
                    document.body.append(ele);
                }
                
                window.onload = function () {
                    addScriptTag("http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=result");
                };
                
                function result(data) {
                    alert('data: ' + data);
                    console.log(data);
                }
            </script>
        </body>
    </html>

    这个callback需要后端去定义!

    可供测试的JSONP服务(以下信息来自使用 JSONP 实现跨域通信):

    Geonames API:邮编的位置信息:

      http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?

    Flickr JSONP API:载入最新猫的图片:

      http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?

    Yahoo Local Search API:在邮编为 10504 的地区搜索比萨:

      http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=10504&results=2&output=json&callback=?

  • 相关阅读:
    (转)ReentrantLock与Synchronized同步区别
    (转)Java NIO框架
    (转)Apache Mina网络框架
    (转)java中Executor、ExecutorService、ThreadPoolExecutor介绍
    路由选择协议
    SYN攻击
    网络基础
    [翻译]在Django项目中添加谷歌统计(Google Analytics)
    初识Python-web框架的这两天
    June本地环境搭建
  • 原文地址:https://www.cnblogs.com/lqcdsns/p/6169852.html
Copyright © 2011-2022 走看看