cordova - CRUD＆JsonP / Sencha Touch 2

Question

プロキシタイプ「jsonp」を介してレコードをアップロードする適切な方法は何ですか？プロキシタイプ「jsonp」でストアをsync（）しようとしていますが、エラーメッセージが表示されます。

これはモデルです：

Ext.define("Sencha.model.User", {
    extend:"Ext.data.Model",
    //idProperty:"",


    config:{
        fields:[
            'userID',
            'userName',
            'userEmail'
        ],


        proxy: {
            type: 'jsonp',
                create  : 'http://domainname.com/users.php?action=insert',
                read    : 'http://domainname.com/users.php?action=fetchAll',
                update  : 'http://domainname.com/users.php?action=update',
                destroy : 'http://domainname.com/users.php?action=delete'
            },
            callbackKey: 'callback',
            reader: {
                type: 'json',
                rootProperty: 'Users',
                successProperty: 'success',
                messageProperty: 'message'
            },
            writer: {
                type: 'json',
                writeAllFields: false,
                encode: true
            }
        }
    }
});

店舗：

Ext.define("Sencha.store.Users", {
    extend:"Ext.data.Store",
    config:{
        model:"Sencha.model.User",
        remoteFilter:false,
        remoteSort:true,
        autoLoad:true,
        }
    }
});

ストアが更新されました：

Ext.getStore('Users').set('userName', 'Tom');

ここで、データベースのレコードを更新したいと思います。

Ext.getStore('Objects').sync();

しかし、エラーが発生します： Uncaught Error：[ERROR] [Ext.data.proxy.Server＃create]JsonPプロキシはデータの読み取りにのみ使用できます。

レコードデータを更新するにはどうすればよいですか？プロキシ経由でデータベースにアップロードしますか？

score 7 · Accepted Answer

CORS（Cross Origin Resource Sharing）を扱っています。デフォルトでは、すべてのブラウザでこれが尊重され、すべてのWebサーバーはデフォルトでCORSリクエストを許可しないように設定されています。CORSの詳細はこちら

Web開発者であり、Webサーバーを使用しているが、JavaScriptから外部の会社のAPIにアクセスする必要がある場合、最も簡単な方法は、Webプロキシとして機能するようにサーバーを設定することです。以下は、いくつかのサーバーの手順です

（達人の読者、私はこれをwikiとして宣言したので、ここにサーバー構成を追加してください）

mod_proxyとmod_proxy_httpを使用したAppache

仮想ホストファイルを開き、それらの行を追加します（mod proxy foirstを有効にします-詳細はこちらをご覧ください）

ProxyPass /proxy http://domainname.com/
ProxyPassReverse /proxy http://domainname.com/

Nginx

アプリの構成にNGIXを使用している場合は、次の行を追加します

location /proxy {
  proxy_pass        http://domainname.com/;
  proxy_set_header  X-Real-IP  $remote_addr; <-- maybe good to set
}

このリンクをさらに読んでください。

IIS

IISサーバーを使用している場合

設定は上記のものよりも少し複雑ですが、ここですべてを見つけることができます

上記のすべての例では、制限されたJSONP機能を使用する代わりに、サーバーでそのAPIを提供しているときに、応答からAjaxとJSONを使用できるようになりました。

はい、わずかな労力でPhonegapでも使用できます

私はbigginingで1つのことを言うことができます。あなたは青いピルか赤いピルのどちらかを取るでしょう:)私は冗談を言っていますが、2つの方法があります。1つは、上記のような構成の独自のサーバーを使用することです。もう1つは、Phonegapネイティブプラグインを使用して手を汚すことです。

最初のアプローチ（Webサーバーの所有者）

独自のWebサーバーが必要です。mod_proxyには上記の設定が必要です。これにより、実際のサービスをサービスの背後に隠し、phonegapアプリからのすべてのHTTPリクエストをプロキシできます。また、phonegapアプリに返される応答にCORS（クロスオリジンリソースシェアリング）ヘッダーを含める必要があります。また、コンテンツを世界に公開しているため、認証でこれを保護することも検討してください。phonegapアプリは、少なくともHTTPSを介した基本HTTP認証を介してWebサービスに対して認証を行います。

次の手順に従ってセットアップを完了します。

Apache

Apacheサーバーでは、最初にモジュールの「ヘッダー」を有効にします

$ a2enmod headers

プロキシ設定の前後の仮想ホストファイルに、以下を追加します。

ProxyPass /proxy http://domainname.com/
ProxyPassReverse /proxy http://domainname.com/
# CORS allow to all
Header set Access-Control-Allow-Origin *
# Set basic authentication
<Location /proxy>
  AuthType Basic
  AuthName "Restricted Area"
  AuthBasicProvider file
  AuthUserFile /usr/local/apache/passwd/passwords
  Require valid-user # setup user/password in file above using htpasswd
</Location>

phonegap（Sencha Touch）では、ajaxリクエストの場合、buffer.SlowBuffer（）;のようなユーザー名とパスワードを設定します。

認証ヘッダーをパックする最初のメソッドが必要になります

function make_base_auth(user, password) {
  var tok = user + ':' + pass;
  var hash = Base64.encode(tok);
  return "Basic " + hash;
}

次に、このようなプロキシセットヘッダーで

headers : { Authorization : make_base_auth("some_username", "some_password") } // I know this is readable by other by you get the point.

IIS 6

Microsoft IIS6をCORS対応にするには、次の手順を実行します。

オープンインターネットインフォメーションサービス（IIS）マネージャー
CORSを有効にするサイトを右クリックして、[プロパティ]に移動します
[HTTPヘッダー]タブに移動します
[カスタムHTTPヘッダー]セクションで、[追加]をクリックします
ヘッダー名としてAccess-Control-Allow-Originと入力します
ヘッダー値として*を入力します
[OK]を2回クリックします

オプションで、基本認証を設定します。これは簡単なプロセスです。

IIS 7

また、プロキシを設定する方法について上記のドキュメントを確認してから、そのweb.configファイルを修正して次のファイルを追加することも検討してください。

<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

nginx

場所に以下を追加

if ($request_method = 'OPTIONS') {

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;

    return 200;
 }

 if ($request_method = 'POST') {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
 }

 if ($request_method = 'GET') {

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

 }

GoogleAppEngineも役に立ちます

このボックスに収まるのは長すぎるので、すべてが適切に説明されている1つのブログへのリンクのみを提供します

リンク

...そして2番目のアプローチはどうですか

少なくともネイティブコーディングが必要です。phonegapプラグインphonegap-proxyが必要です。phonegapのポイントは単一のコードを使用するマルチプラットフォームアプリであるため、「ネイティブ」は避けます...ああ、必要に応じてここでネイティブコードを記述して「特別な」プラグインを実行することは、FacebookAPIに対して同じことを実行する良い例です。

どのアプローチを取るかを決めるのはあなた次第です;）