純 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 我的收款