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サーバを立ててサーバにアップしてから実行すれば上手くいきました。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント