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

TableauのWebDataConnectをやっていて、ネットで公開しているAPIを読み込むと「Allow-Control-Allow-Origin: *」でデータが取得できない！！という問題が発生しました。

クロスドメイン問題と Access-Control-Allow-Origin ヘッダ

APIを公開して、JSONが取得できるのに、
ヘッダに「Allow-Control-Allow-Origin: *」を出力してないから、ブラウザが蹴ってしまう・・・という問題

Failed to load http://ucopendb.gsi.go.jp/ucode/api/search.json?pref_code=12:
Redirect from 'http://ucopendb.gsi.go.jp/ucode/api/search.json?pref_code=12' 
to 'https://ucopendb.gsi.go.jp/ucode/api/search.json?pref_code=12' 
has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8888' is therefore not allowed

こんなエラーが出るやつです。

Tableau WDC Get Started

git clone https://github.com/tableau/webdataconnector.git

cd webdataconnector

こうやって、

npm install -production

とするわけですが・・・

package.json

{
  "name": "webdataconnector",
  "version": "2.0.0",
  "description": "Connect to web data from Tableau.",
  "scripts": {
    "corsproxy": "export CORSPROXY_PORT=8889 || set CORSPROXY_PORT=8889 && node node_modules/corsproxy/bin/corsproxy",
    "http-server": "node node_modules/http-server/bin/http-server -p 8888 -c-1",
    "bundle": "npm run lint && webpack --watch --config ./webpack.config.js",
    "lint": "eslint ./Simulator --ext .js --ext .jsx --cache",
    "lint:fix": "eslint ./Simulator --ext .js --ext .jsx --fix --cache",
    "start": "node node_modules/npm-run-all/bin/npm-run-all --parallel corsproxy-https http-server",
    "start:bundle": "node node_modules/npm-run-all/bin/npm-run-all --parallel corsproxy-https http-server bundle",
    "end-to-end": "node_modules/.bin/mocha --compilers js:babel-core/register --recursive ./Simulator/tests/end-to-end",
    "unit": "node_modules/.bin/mocha --compilers js:babel-core/register --recursive  Simulator/tests/unit",
    "unit:coverage": "node_modules/.bin/nyc --check-coverage --lines 70 --functions 70 --branch 70 npm run unit",
    "unit:coveralls": "node_modules/.bin/nyc --reporter=text-lcov --check-coverage --lines 70 --functions 70 --branch 70 npm run unit | coveralls",
    "test": "node node_modules/npm-run-all/bin/npm-run-all end-to-end unit:coverage",
    "test:travis": "node node_modules/npm-run-all/bin/npm-run-all unit:coveralls end-to-end"
  },
(以下略）

ん？
"corsproxy": "export CORSPROXY_PORT=8889 || set CORSPROXY_PORT=8889 && node node_modules/corsproxy/bin/corsproxy",

CORS用のプロクシっぽいのがある・・・・
corsproxy - npm
と、これは、http用っぽい・・・でしらべると、https 用というのがありました

corsproxy-https - npm
↑https 用
セットアップ

npm install -g corsproxy-https
corsproxy
# with custom port: CORSPROXY_PORT=1234 corsproxy
# with custom host: CORSPROXY_HOST=localhost corsproxy
# with debug server: DEBUG=1 corsproxy
# with custom payload max bytes set to 10MB (1MB by default): CORSPROXY_MAX_PAYLOAD=10485760 corsproxy

使い方

The cors proxy will start at http://localhost:1337. To access another domain, >use the domain name (including port) as the first folder, e.g.

Access https://example.com:3000/sign_in with the following url:

http://localhost:1337/localhost:3000/sign_in

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

cors プロキシーは　　http://localhost:1337 で動く
他のドメインにアクセスするために使います、アクセスしたいアドレスを第一階層のフォルダにかくとアクセス
https://example.com:3000/sign_in　にアクセスしたい場合は、
http://localhost:1337/example.com:3000/sign_in
にアクセス

package.json

{
  "name": "webdataconnector",
  "version": "2.0.0",
  "description": "Connect to web data from Tableau.",
  "scripts": {
    "corsproxy-https": "export CORSPROXY_PORT=8889 || set CORSPROXY_PORT=8889 && node node_modules/corsproxy-https/bin/corsproxy",
    "http-server": "node node_modules/http-server/bin/http-server -p 8888 -c-1",
    "bundle": "npm run lint && webpack --watch --config ./webpack.config.js",
    "lint": "eslint ./Simulator --ext .js --ext .jsx --cache",
    "lint:fix": "eslint ./Simulator --ext .js --ext .jsx --fix --cache",
    "start": "node node_modules/npm-run-all/bin/npm-run-all --parallel corsproxy-https http-server",
    "start:bundle": "node node_modules/npm-run-all/bin/npm-run-all --parallel corsproxy-https http-server bundle",
    "end-to-end": "node_modules/.bin/mocha --compilers js:babel-core/register --recursive ./Simulator/tests/end-to-end",
    "unit": "node_modules/.bin/mocha --compilers js:babel-core/register --recursive  Simulator/tests/unit",
    "unit:coverage": "node_modules/.bin/nyc --check-coverage --lines 70 --functions 70 --branch 70 npm run unit",
    "unit:coveralls": "node_modules/.bin/nyc --reporter=text-lcov --check-coverage --lines 70 --functions 70 --branch 70 npm run unit | coveralls",
    "test": "node node_modules/npm-run-all/bin/npm-run-all end-to-end unit:coverage",
    "test:travis": "node node_modules/npm-run-all/bin/npm-run-all unit:coveralls end-to-end"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/tableau/webdataconnector.git"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-eslint": "^6.1.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-2": "^6.11.0",
    "chromedriver": "^2.21.2",
    "coveralls": "^3.0.1",
    "enzyme": "^2.3.0",
    "eslint": "^2.13.1",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^1.9.2",
    "eslint-plugin-jsx-a11y": "^1.5.3",
    "eslint-plugin-react": "^5.2.2",
    "express": "^4.14.0",
    "js-cookie": "^2.1.2",
    "jsdom": "^9.3.0",
    "mocha": "^5.2.0",
    "nyc": "^13.0.0",
    "querystring": "^0.2.0",
    "react": "15.1.0",
    "react-addons-test-utils": "15.1.0",
    "react-bootstrap": "^0.29.5",
    "react-dom": "15.1.0",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2",
    "redux-actions": "^0.10.0",
    "redux-logger": "^2.6.1",
    "redux-mock-store": "^1.1.2",
    "redux-thunk": "^2.1.0",
    "selenium-webdriver": "^2.53.3",
    "should": "^9.0.2",
    "sinon": "^1.17.4",
    "underscore": "^1.8.3",
    "validate.js": "^0.10.0",
    "vis": "^4.16.1",
    "webpack": "^1.13.1"
  },
  "dependencies": {
    "corsproxy": "^1.4.0",
    "corsproxy-https": "^1.4.0",
    "http-server": "^0.11.1",
    "npm-run-all": "^2.1.1"
  },
  "nyc": {
    "include": [
      "Simulator/actions/*.js",
      "Simulator/components/*.jsx",
      "Simulator/reducers/*.js",
      "Simulator/store/*.js",
      "Simulator/utils/*.js"
    ],
    "extension": [
      ".jsx"
    ]
  }
}

corsproxy を　corsproxy-https　に書き換える。
変更箇所は3箇所、追加は1箇所

"corsproxy-https": "export CORSPROXY_PORT=8889 || set CORSPROXY_PORT=8889 && node node_modules/corsproxy-https/bin/corsproxy",
"start": "node node_modules/npm-run-all/bin/npm-run-all --parallel corsproxy-https http-server",
"start:bundle": "node node_modules/npm-run-all/bin/npm-run-all --parallel corsproxy-https http-server bundle",
"corsproxy-https": "^1.4.0",

4番目のdependenciesに入れないといけないかは、npmの使い方をよく知らない見様見真似でやってるのでいらないかもしれないのですが、そこについてはご容赦ください

webdataconnector_ucopendb.js

        $.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++) {

※webdataconnector_ucopendb.js は、チュートリアルの earthquakeWDC.js （http）をもとに、取得先を変えてみたものです。　CORS問題でデータの取得まで行かなかったのです・・・・

http://ucopendb.gsi.go.jp/ucode/api/search.json?pref_code=12
へアクセスするとできなかったのですが、

http://localhost:8889/ucopendb.gsi.go.jp/ucode/api/search.json?pref_code=11
へアクセスするとできるようになりました