AngularJS没有发送-X_XSRF-令牌

Question

我正在开发一个Ionic移动应用程序，使用JSON与我的后端Rails服务器对话。如果第一个AngularJS将自动处理XSRF保护请求返回名为XSRF-TOKEN的cookie，则通过在POST请求上发送标题X-XSRF-TOKEN来读取该GET

我已经将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并没有将头X-XSRF-TOKEN发送到我的后端Rails服务器，从而导致了WARNING: Can't verify CSRF token authenticity。

我读了一堆这样的问题，但都没有用。例如AngularJS中未设置XSRF标头

我增加了CORS的标题，以便我可以从Chrome测试。同样，我可以看到cookie来自服务器，但是头没有被发送回来。然而，cookie将被发送回Cookie标题字段。

有人能看到我错过了什么，或者我可以尝试什么来解决这个问题吗？我目前正在解析请求中的Cookie头字段，以提取令牌并检查真实性，以避免测试时出现的问题。

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
• 离子1.1.6 (在AngularJS中捆绑)

Answer 1

根据文件

$http：将不会为跨域请求设置标题。

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

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');
}]);

Answer 2

对于任何像我这样来到这里的人来说，他们只是想弄清楚为什么anyone不发送XSRF报头：

在我的例子中，我没有注意到我正在发送带有HttpOnly标志的XSRF令牌 cookie。

Answer 3

配置httpProvider

$httpProvider.defaults.xsrfCookieName = 'csrftoken'; $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';

不为跨域请求设置报头，而对原始域的请求则没有问题。

入口-控制-允许-.标头被设置为允许cookies和报头的CORS：

访问-控制-允许-头:x-请求-与，内容-类型，接受，起源，授权，x-true令牌访问-控制-允许-方法:获取，张贴，放置，补丁，删除，选项访问-控制-来源: origin_url访问-控制-允许-凭据:真