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

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

[クロスドメイン問題と Access-Control-Allow-Origin ヘッダ](http://dotnsf.blog.jp/archives/1063051117.html) 

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]( http://tableau.github.io/webdataconnector/docs/ )

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

```
cd webdataconnector
```

こうやって、

```
npm install -production
```

とするわけですが・・・

```json: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 ](https://www.npmjs.com/package/corsproxy)
と、これは、http用っぽい・・・でしらべると、https 用というのがありました

[corsproxy-https - npm ](https://www.npmjs.com/package/corsproxy-https)
↑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
へアクセスするとできるようになりました