2

そこで、Phone Gap と jQuery mobile を使用してアプリケーションを構築しています。

ajax を使用してホワイトリストに登録されたサーバーから json 応答を取得すると、エラー応答が返されます。ただし、コンソールには何も表示されません。奇妙なことに、Web ブラウザー内でアプリをテストすると正常に動作しますが、iPhone デバイスを起動したときにのみストロップがスローされます。

私が PHP スクリプトをホストしているサイトは、Phone Gap 内のホワイトリストに登録されていることは言うまでもありません。配列で * を使用しています (これが違いを生む場合に備えて)。私はこれに対してjsonpの回避策を考え出しましたが、それを使用したくありません-ブラウザで動作している場合、デバイスで可能でなければならないと感じています。簡単な修正だといいのですが…

これは、json 文字列をエコーするだけの単純な php スクリプトです。

<?php
header('Access-Control-Allow-Origin: *');
$arr = array('a' => 1, 'b' => 2);
echo json_encode($arr);
?>

JSはこちら

    $('#registerUser').submit(function() {
          $.ajax({
                 url: 'http://www.mydomain.co.uk/path/register/add_user.php',
                 type: 'post',
                 dataType: 'json',
                 crossDomain : true,
                 timeout: 5000,
                 success: function(msg){
                    alert(msg.a);
                 },
                 error: function(){
                    alert('There was an error loading the data.');
                 }
                 });
          });
    });

編集:ページにはこのjsもあります... Phone Gapを使用する場合は、jqueryモバイルドキュメントでこれを使用することをお勧めします

        <script>
        $( document ).on( "mobileinit", function() {

            $.mobile.allowCrossDomainPages = true;
            $.support.cors = true;
        });

        </script>

そしてフォーム - これは必要ないと思います...

           <form id='registerUser' action="" method="POST">
                <div data-role="fieldcontain">
                    <label for="name">Name:</label>
                    <input type="text" name="name" id="name" value=""  />
                    <label for="name">Email:</label>
                    <input type="text" name="email" id="email" value=""  />
                    <label for="name">Password:</label>
                    <input type="password" name="password1" id="password1" value=""  />
                    <label for="name">Re-enter password:</label>
                    <input type="password" name="password2" id="password2" value=""  />
                    <br>
                    <button type="submit" aria-disabled="false">Submit</button>
                </div>
            </form>

事前に助けてくれてありがとう！

4

4 に答える 4

2

最も簡単な方法は、PHPサーバーを次のように拡張することです。

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET,PUT,POST,DELETE');
header('Access-Control-Allow-Headers: Content-Type');
$arr = array('a' => 1, 'b' => 2);
echo json_encode($arr);
?>

また、PHPサーバーがOPTIONSHTTPリクエストを許可していることを確認する必要があります。

より長い答えはdataType: 'json'、JSコード内のがCORSプリフライトリクエストをトリガーしているということです。プリフライトリクエストは基本的に、実際のリクエストを行うための許可をサーバーに要求します。CORSプリフライトの詳細については、http ：//www.html5rocks.com/en/tutorials/cors/をご覧ください。

于 2013-01-24T19:47:58.327 に答える
0

Access-Control-Allow-Origin: *実際にクライアントに無視されたケースに遭遇しました。CORS 経由ですべてのドメインを許可する「適切な」方法 (これを確認するには、w3c 仕様を参照) は、実際にリクエスト ヘッダーからオリジン ドメインを取得し、そのオリジンをAccess-Control-Allow-Originレスポンスのヘッダーに動的に適用することだと思います。クライアントがヘッダーを確実に尊重するようにするためのワイルドカード文字。

于 2013-01-24T19:56:01.993 に答える
0

さて、コードに問題はなかったことがわかりました。アプリがエラー結果か何かをキャッシュしていたようです。アプリを強制終了して再起動したところ、すべて正常に動作するようになりました。周りを読んでみると、iOS6 サファリは以前のバージョンとは異なる POST をキャッシュしているようです。

POSTのキャッシュを防ぐために、これをajax呼び出しに追加しました。

 headers: { "cache-control": "no-cache" }

苦痛だったので、これが他の誰かに役立つことを願っています！

返信ありがとうございます

于 2013-01-25T12:35:38.947 に答える