3

我正在开发一个 Web 应用程序，其中我有一个使用 AngularJS 构建的前端，它使用后端 API Rails 应用程序提供的 Rest 服务。

我想使用 Angular $resource 来获取后端 API 中的 Json 对象。

到目前为止，客户端和服务器应用程序在不同的服务器上运行。因此，角度客户端位于 server-path:1234/app 中，后端 api 应用程序运行在 another-server-path:3000/ 中。

其中 server-path 和 another-server-path 是 localhost。

双方都发展起来，并且独立工作。我是说：

  1. 当我在浏览器中运行 another-server-path:3000/boats 时，我得到了船只列表，因此 Restful 服务看起来正在运行。
  2. 我在客户端做了一个模拟，所以，在我的服务中，我用模拟的 url 替换了真实的 url 到 json 数据源。这段代码也有效。

现在，我想从角度服务调用 another-server-path:3000/boats 中的后端 restful 服务，但它现在显示任何数据，我在服务器日志中也看不到任何获取请求。

这是我的角度服务代码：

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)

如您所见，首先，它说它被处理为 HTML 而不是 JSON。第二个它不会被发送回 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

看起来很简单，但这个组合花了我三天时间。

于 2013-09-27T12:15:30.190 回答