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

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

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

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

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

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

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

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

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

プリフライトリクエスト

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

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

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

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

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

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA