纯 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
                    }
                });

 

这样就解决了跨域问题。

 

---

 

插播广告，BufPay 支付平台，我的支付接口 

BufPay 我的收款