3

バックエンドAPI Railsアプリケーションによって提供されるRest Servicesを消費するAngularJSで構築されたフロントエンドを持つWebアプリケーションを開発しています。

Angular $resource を使用して、バックエンド API で Json オブジェクトを取得したいと考えています。

これまでのところ、クライアント アプリケーションとサーバー アプリケーションは異なるサーバーで実行されます。したがって、Angular クライアントは server-path:1234/app にあり、バックエンド API アプリケーションは another-server-path:3000/ で実行されます。

server-path と another-server-path は localhost です。

両側が開発され、独立して動作します。つまり：

  1. ブラウザーで another-server-path:3000/boats を実行すると、ボートのリストが表示されるので、Restful サービスが機能しているように見えます。
  2. クライアント側でシミュレーションを行ったので、私のサービスでは、実際の URL を json データ ソースへのシミュレートされた URL に置き換えました。このコードも機能します。

ここで、angular サービスから another-server-path:3000/boats にあるバックエンドの restful サービスを呼び出したいのですが、データが表示されており、サーバー ログに get リクエストも表示されません。

これは私のAngularサービスコードです:

angular.module('myApp.services', ['ngResource']).
//  value('version', '0.1');

factory('Boat', function($resource){
    return $resource('another-server-path:3000/:boatId', {}, {
    query: {method:'GET', params:{boatId:'boats'}, isArray:true}
  });

});

これは私のバックエンド Rails コントローラーです。

def index
  @boats = Boat.all

  respond_to do |format|
    format.html
    format.xml { render :xml => @boats}
    format.json { render :json => @boats}
  end
end

私は何が欠けていますか？助けてください。

更新: Angular アプリで、サービス ファイルを次のように変更しました。

return $resource('another-server-path\\:3000/:boatId', {}, {
query: {method:'GET', params:{boatId:'boats'}, isArray:true}

また、次の行を app.js ファイルに追加しました。

delete $httpProvider.defaults.headers.common["X-Requested-With"];

そして今、APIサーバーでリクエストを受け取りました。コントローラも実行されます。DBからボートを入手しました。ただし、それらを JSON で Angular に送り返すことはできません。

これは私のAPIコントローラーです:

def index
  @boats = Boat.all
  puts @boats
  render :json => @boats          
end

これは、呼び出されたときに取得したログです。

    Started GET "/boats" for 127.0.0.1 at 2013-09-26 17:05:49 +0200
Processing by BoatsController#index as HTML
  Boat Load (2.0ms)  SELECT `boats`.* FROM `boats`
#<Boat:0x0000000675d9f0>
#<Boat:0x000000089e74a8>
#<Boat:0x000000089e71b0>
#<Boat:0x000000089e6e40>
Completed 200 OK in 66ms (Views: 3.0ms | ActiveRecord: 7.0ms)

ご覧のとおり、まず、JSON ではなく HTML として処理されたと表示されます。Angular に送信されない秒。

4

1 に答える 1

2

うまくいきました！

この構成をconfig/application.rbに入れることで、クロスドメインリクエストを受け入れるようにRails APIを構成します

config.action_dispatch.default_headers = {
  'Access-Control-Allow-Origin' => '*',
  'Access-Control-Request-Method' => '*'
}

リソース呼び出しを含む私のサービスファイル:

factory('Boat', function($resource){    
    return $resource('http://127.0.0.1\\:3000/:boatId', {}, {       
    query: {method:'GET', params:{boatId:'boats'}, isArray:true}
  });
}).

と私の Rails API コントローラ:

def index

  @boats = Boat.all
  puts @boats
  render :json => @boats          
end

簡単に見えますが、この組み合わせで3日かかりました。

于 2013-09-27T12:15:30.190 に答える