Cordova(HTML5+CSS)+REST APIでCORSを有効にする

Cordova(HTML5+CSS)+REST APIでCORSを有効にする
1. 関連

Cordova(HTML5+CSS)+REST APIでCORSを有効にする

AngularだとプロキシファイルでCORSを有効にできて、AWS API Gatewayでも画面上でCORSを有効にできたのですが、ハイブリッド開発だとサーバサイド側でレスポンスヘッダーに追加してあげないといけないっぽいのでメモです。

REST APIのJava側に以下を追加しました。

HttpHeaders headers = new HttpHeaders();
headers.add("Access-Control-Allow-Origin", "*");

一旦Chromeの開発者ツールでヘッダを確認してみます。

これでとりあえずのCORSを有効にすることができました。Andoroid端末からREST APIを呼び出すことが可能です。

JSONPなどを使えばクライアント側でも対応できるようですが、クロスサイトリクエストフォージェリ対策が必要そうです。

クライアント側の$.ajaxの引数にcrossDomain: trueを追記してクロスドメイン通信が可能でした。

$.ajax({
  url : 'http://localhost/login',
  type:'POST',
  dataType: 'json',
  crossDomain: true
})

プリフライトリクエスト

POSTでJSONデータを渡すときはOPTIONSメソッドが実行され、安全性を確認してからPOSTが実行されます。このOPTIONSメソッドをプリフライトリクエストと言います。

contentType: 'application/json'

この指定をすると、POSTで飛ばしたはずがOPTIONSになっているのが確認できます。

プリフライトリクエスト、実際のPOSTリクエストを呼ぶので通信は２回行うことになります。

プリフライトリクエストでハマった件

HTMLファイルからAjaxでJSONを渡して自端末からそのままChromeでファイルを開いて実行していたらOPTIONSとなってCORSのエラーが出ました。POSTMANだと上手くいくのにブラウザからだと上手くいかない。fileプロトコルだったからでした。ちゃんとWebサーバを立ててサーバにアップしてから実行すれば上手くいきました。