zoukankan      html  css  js  c++  java
  • 小刀jsonp跨域

    经常说到jsonp,今天理一理。

    同源策略

    同协议,同域名,同端口;

    会限制你的ajax,iframe操作,窗口信息的传递,无法获取跨域的cookie、localStorage、indexDB等;

    jsonp

    原理很简单,html中大部分的src不受同源策略限制,包括link、img、css(background-image等),运用script中src自带的跨域属性请求后台接口

    function addScript(url){ 
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = url;
        document.body.appendChild(script);
    }

    //回调句柄
    function handle(data){
      console.log(data);
    }
    //假设请求接口,约定callback字段
    addScript(“http://******/getdata?callback=handle”);

      node代码:

    /* GET jsonp listing. */
    router.get('/', function (req, res, next) {
       //模拟数据 var data = { mess: 'hi' };
       //获取回调函数名 var callback = req.query.callback; if (callback) { data = JSON.stringify(data);
         //返回为字符串 res.send(`${callback}(${data})`); } else { res.send('nocallbak'); } });

      回调结果:并没有JSON.parse

    注意事项:

      jsonp有很多限制值得注意,只能发送GET类型的请求,无法监测请求是否成功,请求一旦完成立马触发函数,控制的手段比较有限,但好在兼容性不错所有浏览器都支持,不用多余的配置。

  • 相关阅读:
    约数个数 和 约数之和
    二分模板
    新生赛补题
    codefores刷题心得3 思维+dp(特别好玩)
    二叉树的遍历及例题
    团队作业七——团队作业分配
    WarPlane——游戏设计文档
    团队作业(五)
    团队作业(四)
    团队项目方案分析
  • 原文地址:https://www.cnblogs.com/dansingal/p/8244026.html
Copyright © 2011-2022 走看看