ruby-on-rails - Angular $http 和 Rails 4 参数

Question

我正在使用 rails-api gem 来获得一个 Rails API，并使用 Angular 为我的前端提供动力。每当我使用 $http 时，只有当我传入 params 而不是 data 时它才会起作用。这是一个尝试登录用户并创建新 session 的示例:

'use strict';

app.controller('LoginCtrl', function($scope, $location, $http, tokenHandler) {
  $scope.login = function() {
    $http({
      url: 'http://localhost:3000/api/admins/sign_in',
      method: 'POST',
      params: $scope.admin
    }).success(function(data) {
      if (data.success) {
        $scope.ngModel = data.data.data;
        tokenHandler.set(data.data.auth_token);
        $location.path('/admin/blog');
      } else {
        $scope.ngModel = data;
        $scope.user.errors = data.info;
      }
    }).error(function(msg) {
      $scope.admin.errors = 'Something is wrong. Please try again.';
    });
  };
});

如果我使用 data: { admin: $scope.admin } 而不是 params，Rails 会向我提示 params[:admin] 为 nil。它似乎根本没有通过。

但是，如果我使用参数，我会得到:

Started POST "/api/admins/sign_in?email=raderj89@gmail.com&password=[FILTERED]" for 127.0.0.1 at 2014-09-07 20:08:04 -0400
Processing by Admin::SessionsController#create as HTML
  Parameters: {"email"=>"raderj89@gmail.com", "password"=>"[FILTERED]"}

我可以与之合作。奇怪的是，它似乎只在请求被处理为 HTML 时才起作用。当我使用 data 时，我得到了这个:

Started OPTIONS "/api/admins/sign_in" for 127.0.0.1 at 2014-09-07 20:36:24 -0400
Processing by Admin::SessionsController#create as */*

难道是说用*/*处理吗？我认为它应该理解它应该专门由 json 处理。

我的 session Controller 看起来像这样:

class Admin::SessionsController < Devise::SessionsController
  skip_before_filter :verify_authenticity_token

  before_filter :authenticate_user!, except: [:create]
  respond_to :json

  # ...
end

奇怪的是，我第一次使用 data: { admin: $scope.admin } 确实让它工作了，但从那以后，参数似乎永远不会通过，除非我使用 参数:$scope.admin.

还有:

我正在使用 Devise 进行身份验证，我必须将其添加到我的 ApplicationController 中:

class ApplicationController < ActionController::API
  include ActionController::MimeResponds

  before_filter :set_cors_headers
  before_filter :cors_preflight

  private 

    def set_cors_headers
      headers['Access-Control-Allow-Origin'] = AppConfig.client['origin']
      headers['Access-Control-Allow-Methods'] = 'GET,POST,PUT,DELETE,OPTIONS'
      headers['Access-Control-Allow-Headers'] = '*'
      headers['Access-Control-Max-Age'] = "3628800"
    end

    def cors_preflight
      head(:ok) if request.method == :options
    end
end

以前有人处理过这个吗？

Answer 1

我终于让它工作了，虽然我仍然很困惑，但我想我已经找到了接近问题所在的地方:我的 Rails API 中的 CORS 配置。

据我了解，Angular 默认以 JSON 格式发送数据。这通过“Content-Type:application/json;charset=UTF-8”，而在 jQuery AJAX 请求中，它通过“Content-Type:application/x-www-form-urlencoded; charset=UTF-8” "，并使用 $.param() 转换为查询字符串。我承认，我以前可能听说过，但直到现在才真正意识到这个事实及其影响。

在我的应用程序 Controller 中，我像这样配置了我的 CORS 设置:

def set_cors_headers
  headers['Access-Control-Allow-Origin'] = AppConfig.client['origin']
  headers['Access-Control-Allow-Methods'] = 'GET,POST,PUT,DELETE,OPTIONS'
  headers['Access-Control-Allow-Headers'] = '*'
  headers['Access-Control-Max-Age'] = "3628800"
end

def cors_preflight
  head(:ok) if request.method == :options
end

AppConfig 只是一个 OpenStruct，它告诉我的 Rails API 从哪个来源接受请求。然后其他一切都应该简单地设置 CORS header 。

由于某些我仍然不确定的原因，这不适用于 JSON 请求。我从一个使用 Angular 和 Rails 的教程中获得了上面的代码，在本教程中，他们手动剥离了 Assets 管道，留下了关于 Rails 的所有其他内容，而 rails-api 剥离了一些 Rails 配置。这可能就是在 ApplicationController 中设置 CORS header 不起作用的原因。

起作用的是使用 rack-cors gem然后将此位添加到 development.rb:

  config.middleware.use Rack::Cors do
    allow do
      origins 'localhost:9000'
      resource '*', :headers => :any, :methods => [:get, :post, :options, :delete]
    end
  end

这告诉我的应用程序接受来自 localhost:9000 的请求，并接受任何 header 。我以为我是在我的 ApplicationController 中使用 headers['Access-Control-Allow-Headers'] = '*' 完成的，但我想不是。一旦我指定 Rails 使用这些中间件设置，一切都会完美运行。我的 Rails API 现在可以从我的 Angular 应用程序中接受 application/json。

如果有人可以填补我仍然感到困惑的空白，我将不胜感激。但我希望这对其他人有帮助。