1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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」
~マンガでプログラミング用語解説

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?