cordovaでのajax通信でcorsでハマったのでメモ
はじめに
angular.jsでcorsを有効にしてajax通信できることは過去に実装したことがあった。
なのでcordovaを使用する場合に特別なことをする必要があると思ったのですが違いました、、、
いちおう今回対応できたのでメモしておきます
対応したこと
・サーバ側のレスポンスヘッダーに「Access-Control-Max-Age」を付与
・ローカルhtmlのangular.jsの実装で「$resource」を使用せずに「$http」で実装
サーバ側のレスポンスヘッダーに「Access-Control-Max-Age」を付与
修正前
header('Access-Control-Allow-Origin: *');
修正後
header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: POST, GET, OPTIONS'); header('Access-Control-Allow-Headers: X-PINGOTHER'); header('Access-Control-Max-Age: 1728000');
僕の場合これで上手く動きました。
ただ、この修正後に再度「Access-Control-Allow-Methods」「Access-Control-Allow-Methods」「Access-Control-Max-Age」を外してみたのですが正常に動作しました、、、最初に上手く動かない状態のキャッシュがローカルに残ってしまい上手く動かなかったのでしょうか。
とりあえず上記を書いておけば大丈夫そうなので僕はこの形で実装することにします。
ローカルhtmlのangular.jsの実装で「$resource」を使用せずに「$http」で実装
$resourceを使用 ※動かない!?
myApp.factory("ModelUser", function($resource) { return $resource( "http://example.com/api/user/get.json", null, { get: { method: "post", headers: {'Content-Type': 'application/x-www-form-urlencoded'}, withCredentials: true } } ); });
$httpを使用 ※動く!
$http({ method: "post", withCredentials: true, headers: {'Content-Type': 'application/x-www-form-urlencoded'}, "http://example.com/api/user/get.json", data: "id=" + id }).success(function(response){ });
とりあえず今は動くこと優先なのでこれで対応します。
うーん、けどなんだろう。$resource使うと動かないというのは考えがたいのですが、、、
引き続き調査していこうと思います。
原因などご存知の方がいたら教えてください
以上です