Angular资源服务不消耗rails中的rest ful服务（Json格式）答案

【问题标题】：Angular resource service does not consume rest ful service in rails (Json format)Angular资源服务不消耗rails中的rest ful服务（Json格式）
【发布时间】：2013-09-25 11:54:05
【问题描述】：

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

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

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

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

双方都发展起来，独立运作。我的意思是：

当我在浏览器中运行 another-server-path:3000/boats 时，我得到了船的列表，因此 Restful 服务看起来正在运行。
我在客户端进行了模拟，因此，在我的服务中，我将真实 url 替换为 json 数据源的模拟 url。此代码也有效。

现在，我想从 Angular 服务调用 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。

【问题讨论】：

这可能是跨域请求问题。如果发出请求的站点与服务器不同，则它是跨域调用。谷歌了解如何使用 angularjs 实现它。
您使用的是 1.0.x 版本的 angularJS 吗？在这种情况下，您需要转义 url 上的端口：$resource('another-server-path\\:3000/:boatId'
我更改了 url 以返回 $resource('http\\://localhost\\:3000/:boatId', {}, { query: {method:'GET', params:{ boatId:'boats'}, isArray:true} 现在，看起来我到达了 api 服务器，我可以看到一个新的跟踪，试图请求一些东西，但是它是一个错误跟踪：Started OPTIONS "/boats" for 127.0.0.1 at 2013-09-26 08:40:21 +0200 ActionController::RoutingError (No route matches [OPTIONS] "/boats"):

标签： angularjs ruby-on-rails-4

【解决方案1】：

我搞定了！

我通过将此配置放在 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

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

【讨论】：