ruby-on-rails - AngularJS 不发送-X XSRF-TOKEN

Question

我正在开发一个 Ionic移动应用程序与我的后端交谈 Rails服务器使用 JSON API。我读过 AngularJS will automatically handle XSRF protection通过发送 header X-XSRF-TOKEN在 POST请求如果第一个 GET请求返回一个名为 XSRF-TOKEN 的 cookie

我已经更新了我的 Rails application_controller.rb如下:

class ApplicationController < ActionController::Base
  protect_from_forgery
  after_filter :set_access_control_headers
  after_filter :set_csrf_cookie_for_ng

  def after_sign_in_path_for(resource)
    main_path
  end

  def after_sign_out_path_for(resource)
    login_path
  end

  ##
   # Sets headers to support AJAX Cross-Origin Resource Sharing.
   # This is only needed for testing within browser (i.e. mobile apps do not need it).
   ##
  def set_access_control_headers
    # hosts who can make AJAX requests
    headers['Access-Control-Allow-Origin'] = 'http://localhost:8100'
    headers['Access-Control-Request-Method'] = '*'
    headers['Access-Control-Allow-Headers'] = 'accept, content-type, x-xsrf-token'
    # allow clients to use cookies to track session state
    headers['Access-Control-Allow-Credentials'] = 'true'
  end

  ##
   # Sets a cookie containing an XSRF token. This should be returned by the
   # client as a header field named 'X-XSRF-TOKEN'
  def set_csrf_cookie_for_ng
    cookies['XSRF-TOKEN'] = form_authenticity_token if protect_against_forgery?
  end

protected

  def verified_request?
    super || form_authenticity_token == request.headers['X-XSRF-TOKEN']
  end
end

AngularJS 代码是:

$http({
  method: 'POST',
  url: $scope.getBackendUrl() + '/reports.json',
  params: params,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

我拍了 Wireshark转储并可以看到 Rails 服务器正在通过 Cookie 发送(我可以在 AngularJS 中读取它)。但是，AngularJS 没有发送 header X-XSRF-TOKEN到我的后端 Rails 服务器，导致 WARNING: Can't verify CSRF token authenticity .

我已经通读了一堆 SO 问题，但无济于事。例如。
XSRF headers not being set in AngularJS

我添加了 CORS header 内容，以便我可以从 Chrome 进行测试。再次，我可以看到 cookie 来自服务器，但 header 没有被发回。但是，cookie 是在 'Cookie' header 字段中发回的。

任何人都可以看到我缺少什么，或者我可以尝试解决这个问题吗？我目前正在解析 Cookie请求中的 header 字段以提取 token 并检查真实性以在测试时解决问题。

def verified_request?
  # should just need to do the below, but for some reason AngularJS is not setting 'X-XSRF-TOKEN'
  #super || form_authenticity_token == request.headers['X-XSRF-TOKEN']
  if(super)
    true
  else
    cookie = request.headers['Cookie'] || ""
    value = cookie.nil? ? "" : CGI.unescape( cookie.gsub(/.*XSRF-TOKEN=(.+);.*/, '\1') )
    form_authenticity_token == value
  end
end

版本:

rails 3.2.3

Ionic 1.1.6(在 AngularJS 中捆绑)

Answer 1

根据文档

$http: The header will not be set for cross-domain requests.

如果您必须使用 CORS，您还需要进行跨域请求。仍然可以使用 $httpInterceptor 自己完成。您首先读取 cookie 值，然后在触发请求之前将 header 附加到配置。

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
module.factory('XSRFInterceptor', function() {
    var XSRFInterceptor = {
        request: function(config) {
            var token = readCookie('XSRF-TOKEN');
            if (token) {
                config.headers['X-XSRF-TOKEN'] = token;
            }
            return config;
        }
    };
    return XSRFInterceptor;
}]);
module.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('XSRFInterceptor');
}]);