2

monacaでアプリを作っています。

これまでCordova4.2環境で、jQueryの$.ajaxを利用して外部ドメイン化に配置したjsonデータを通信・取得する処理をしておりましたが、monacaでCordova5.0が利用できるようになりアップデートをしたところ、通信・取得ができなくなってしまいました。

おそらく、Cordova5.0から追加されたwhitelistプラグインによる影響で、外部ドメインへのajax通信が遮断されてしまっているのかなと予想はしているのですが、いかんせん、それをどのように対処すれば通信・取得が可能になるかが検討がつきません。(metaタグとして、Content-Security-Policyの適切な値を指定する必要がある?)

現在の記述は以下のとおりです。

var jsonObject;
var url = 外部ドメインのjsonデータまでのURL;
    $.ajax({
        type: "GET",
        url: url+"data.json",
        data: {"data" : "data"},
        dataType: "json",
        async: false,
        success: function(data){
            jsonObject = data;
        }
    });

どなたかお分かりの方おりましたら、よろしくお願いします。


11/26 15:44 私が新規ユーザーなのでコメント追加が出来ないため、お返事に追記を利用します。
ご丁寧に有難うございます。が、やはり上手くいきませんでした。
参考までに、errorThrownの内容を以下の通り掲載します。

NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'jsonデータのURL'.
1
  • 1
    ajax通信が動作しないのはどの環境になりますか(デバッグビルドしたアプリですか?)?プレビュー画面では、もともとなできないはずです。
    – user7461
    Commented 2015年11月28日 5:45

1 件の回答 1

2

HTMLのMETAタグを下記のようにして試してみてください。

 <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

Cordova5になった際のWhitelistPluginの関係です。
こちらのブログから参照です。


追記
私の環境では下記のコードでAjax通信が出来ることを確認しました。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <script>
            document.addEventListener('deviceready',function(){
                //Ajax通信
                $.ajax({
                    type: 'post',
                    url: 'http://domain/ajax',
                    success: function (data, dataType) {
                        $("body").html("success");
                        $("body").html(data);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        $("body").html("error");
                        $("body").html(XMLHttpRequest);
                    }
                });
            },false);
        </script>
    </head>
    <body>
    </body>
</html>

アップデートされたプロジェクトだということですので

  • Cordovaプラグイン
     MonacaPlugin:v2.0.0
  • JS/CSSコンポーネント
     Monaca Core Utility:Ver=2.0.4

以上のバージョンを確認してみてください。

3
  • 回答ありがとうございます。ご提示頂いたMETAタグおよび公式ブログの内容も把握しておりましたが、METAタグを追加しても通信・取得が出来ない状況です。そもそもクロスドメイン関連で問題があるのでしょうか…。
    – kram
    Commented 2015年11月25日 12:36
  • 解答を追記しました。確認してみてください。
    – user10259
    Commented 2015年11月26日 1:40
  • 検証している実機端末は何でしょうか? エラーの内容がChromeのような気がします。(※普通のブラウザはクロスドメイン制約が厳しいため) 何でデバッグしていますか? iOSですか?Androidですか?Chromeですか?Win10アプリですか? デバッグ後のビルドですか?デバッガですか?それともプレビュー画面ですか?これ以上の細かい話は環境を書いてください。
    – user10259
    Commented 2015年11月28日 7:33

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。