纯 js 实现跨域接口调用 jsonp

开发「bufpay.com 个人即时到账收款平台」的时候,支付页面需要 poll轮询 查询订单状态。

bufpay 支付接口如下:

接口地址:https://bufpay.com/api/pay/aid  (在后台应用配置页面查看)
调用方法:POST
调用参数:
 - name, 必填, 订单销售商品名称
 - pay_type, 必填, 支付方式(可选alipay/wechat)
 - price, 必填, 订单价格
 - order_id, 必填, 订单号
 - order_uid, 必填, 订单购买用户(可以为空字符串,但是建议设置为购买用户编号,便于后续对账)
 - notify_url, 必填, 支付成功后回调地址
 - return_url, 必填, 支付成功后前台跳转地址(可以为空字符串)
 - sign, 必填, 将参数按 name + pay_type + price + order_id + order_uid + notify_url + return_url + app secret 顺序拼接后 MD5

注意:使用该接口的建议方法是:在你的产品付款接口后台构造好上面的参数,然后渲染一个自动提交的 form 返回给用户浏览器,
用户浏览器会 post 这些参数到 BufPay,然后就会显示支付页面;
如果 api 后面加 ?format=json 那么返回结果就是 json 格式的,需要开发者自己展示付款二维码。

支付页面设计之初就是在 bufpay.com 域名下面,如果要自己渲染支付页面就指定接口返回的内容为 json。

但是有些开发者是后台直接请求支付页面,然后把支付页面的 html 的内容直接在自己的域名下面渲染给用户,这样,在开发者自己的域名下面,支付页面调用 bufpay.com 的订单查询接口就会出现跨域问题。

Failed to load https://bufpay.com/: Redirect from 'https://bufpay.com/' to 'https://www.bufpay.com/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://bufpay.com' is therefore not allowed access.

为了避免这种问题,我们需要修改接口支持 jsonp 调用, 在服务端增加:

        cb = self.get_argument('callback', None)
        if cb:
            return self.write('%s(%s)' % (cb, json.dumps({'status': od['status'] if od else 'not_exist'})))

callback 参数判断,如果传了 callback 参数,就把原本为 json 的格式转换成 callback(json) 这样。

然后客户端修改,自己实现 jsonp 请求(如果是jQuery就比较简单):

            var $jsonp = (function(){
              var that = {};
              that.send = function(src, options) {
                var callback_name = options.callbackName || 'callback',
                  on_success = options.onSuccess || function(){},
                  on_timeout = options.onTimeout || function(){},
                  timeout = options.timeout || 10; // sec
                var timeout_trigger = window.setTimeout(function(){
                  window[callback_name] = function(){};
                  on_timeout();
                }, timeout * 1000);
                window[callback_name] = function(data){
                  window.clearTimeout(timeout_trigger);
                  on_success(data);
                }
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.async = true;
                script.src = src;
                document.getElementsByTagName('head')[0].appendChild(script);
              }
              return that;
            })();

调用的时候就:

                $jsonp.send("https://bufpay.com/api/query/{{aoid}}?callback=cb&_=" + new Date().getTime(), {
                    callbackName: 'cb',
                    onSuccess: function(ret){
                        //do something
                    }
                });

这样就解决了跨域问题。

插播广告

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,496评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,407评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,632评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,180评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,198评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,165评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,052评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,910评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,324评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,542评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,711评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,424评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,017评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,668评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,823评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,722评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,611评论 2 353

推荐阅读更多精彩内容

  • 人生就像一列开往坟墓的列车,路途上会有很多站,很难有人至始至终陪你走完全程,当陪你的人要下车时,即便不舍,也要心存...
    sunny519111阅读 1,625评论 0 1
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,979评论 3 119
  • 原文地址:原文地址 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义...
    C_Y大渔阅读 1,259评论 1 13
  • Section1、为什么要跨域? 自古以来(1995年起),为了用户的信息安全,浏览器就引入了同源策略。那么同源策...
    不去解释阅读 553评论 0 0
  • 晚上散歩,微信扫码送了一个小猪佩奇的气球。也许有点累了,女儿一路上情绪都挺大。快到家了,嘴里嘟囔着:“憋了,一点都...
    长情日记阅读 451评论 0 0