Tableau WDCの「Allow-Control-Allow-Origin: *」問題を回避してみる(Ajax+JSONP版)


Tableau WDCの「Allow-Control-Allow-Origin: *」問題を回避してみる(Proxy https版)

をJSONPを使っての対応版です。
こちらすごく簡単でした

プロキシーを使って、CORSを回避する方法

    myConnector.getData = function (table, doneCallback) {
        tableau.log("getData" );
        $.getJSON(
            "http://localhost:8889/ucopendb.gsi.go.jp/ucode/api/search.json?pref_code=11",
//           "http://ucopendb.gsi.go.jp/ucode/api/search.json?pref_code=12",
            function(resp) {
                var feat = resp.items, tableData = [];

                // Iterate over the JSON object
                for (var i = 0, len = feat.length; i < len; i++) {
                            tableData.push({
                        "status_code": feat[i].status_code,
                        "ucode_url": feat[i].ucode_url,
                        "name": feat[i].name,
                        "feature": feat[i].feature,
                        "city_code": feat[i].city_code,
                        "ucode": feat[i].ucode,
                        "longitude": feat[i].coordinate.longitude,
                        "latitude": feat[i].coordinate.latitude,
                    });
                }
                table.appendRows(tableData);
                doneCallback();
            }
        );
    };

JSONPを使って回避する方法
思った以上にコチラ簡単だった・・・

  • urlに &callback=? をつける
  • $.getJSON(url).done(function(resp) を使う ※ここはよくわかってない
myConnector.getData = function (table, doneCallback) {

        tableau.log("getData JSONP" );
        var url = 'http://ucopendb.gsi.go.jp/ucode/api/search.json?pref_code=12&callback=?'
        $.getJSON(url).done(function(resp) {
                var feat = resp.items, tableData = [];

                // Iterate over the JSON object
                for (var i = 0, len = feat.length; i < len; i++) {
                            tableData.push({
                        "status_code": feat[i].status_code,
                        "ucode_url": feat[i].ucode_url,
                        "name": feat[i].name,
                        "feature": feat[i].feature,
                        "city_code": feat[i].city_code,
                        "ucode": feat[i].ucode,
                        "longitude": feat[i].coordinate.longitude,
                        "latitude": feat[i].coordinate.latitude,
                    });
                }
                table.appendRows(tableData);
                doneCallback();
            }
        );
    };

参考: 「JSONとJSONP」
~マンガでプログラミング用語解説