2

rails-apigemを使用してJSONAPIを作成するためのRyanBates＃348ビデオを終了しました。例のように動作させています。ただし、彼の例では、同じプロジェクトでAPIを呼び出すページがあります。私の目標は、クライアントアプリをAPIアプリから分離することです。

APIデータのJSONリクエストを行うページと、フォームを送信する際の投稿を含む2つ目のRailsアプリを作成しました。クライアントアプリをlocalhost：3000で実行し、APIをlocalhost：4000で実行しています。

以下はクライアント側のコードです。新しい取引レコードを正常に送信しますが、GETは取引のリストをロードしません。ログを見ると、HTMLとして要求しているように見えます。ページが同じAPIプロジェクトの一部である場合、同じコードがログでJSONとして呼び出しを行っていました。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
  $(function() {
    function addDeal(deal) {
      $('#deals').append('<li>' + deal.name + '</ul>');
    }

    $('#new_deal').submit(function(e) {
      $.post('http://localhost:4000/deals', $(this).serialize(), addDeal);
      this.reset();
      e.preventDefault();
    });

    $.getJSON('http://localhost:4000/deals', function(deals) {
      $.each(deals, function() { addDeal(this); });
    });
  });
</script>

<div id="container">
  <h1>My Deals</h1>
  <form id="new_deal">
    <input type="text" name="deal[name]" id="deal_name">
    <input type="submit" value="Add">
  </form>
  <ul id="deals"></ul>
</div>
4

1 に答える 1

2

Cross Origin Policy により、次のオプションがあります。

  1. jsonpを使用します（サーバーがあるのでこれを行わないでください:)以下を確認してください）
  2. サーバーでクロスオリジンリソース共有を管理します。最近、これを達成する方法についてここに回答を書きました
  3. Rails ActiveResource::Baseを使用して API に接続することもできますが、遅くなる可能性があり、バックエンドに必要なプレゼンテーション ロジックがない限り、同じことを繰り返すことになります。ところで、Nibbler gem を確認してください。多少改善される可能性があります。バックエンドで何をする必要があるかによって異なります。

とにかく。特にPOST、PUT、またはDELETEする場合は、アプローチ1を避けます。純粋なJavaScriptアプリをUIとして実行している場合は、オプション2を使用できます。しかし、JS にとらわれないアプリを構築している場合でも、常に多少のバックエンド処理が必要になるため、おそらくオプション 3 をお勧めします。

于 2012-08-26T22:03:47.667 に答える