AngularJS (Blueimp Jquery-file-uploader) with Rails + Devise - Completed 401 Unauthorized

Question

I have an AngularJS app running in a node server against a Rails 3.2 backend. I am using a CSRF token in a cookie/HTTP Header (not <%= csrf_token %>). Angular can GET and POST to Rails with no problems.

I am now trying to implement 'http://blueimp.github.io/jQuery-File-Upload/angularjs.html'. If I have protect_from_forgery enabled, I get(first message is my puts - the tokens don't match):

VERIFIED_REQUEST user: request: ROyZgMl6CUpbifI45b4URs2iJPRmCtg+mranU8A7xhA= form_authenticity_token f3+AZaCqzTOXTlwadMZIkOGpyqQFcXZ7ITbm87NUA04= WARNING: Can't verify CSRF token authenticity Completed 401 Unauthorized in 344ms

If I remove protect_from_forgery, I don't get the CSRF warning, but I still get the 401! The same feature works perfectly once the code is deployed (to the public folder in Rails, therefore the same domain).

I have tried almost every solution I could find on stackoverflow and elsewhere and am now pulling my hair out. Heres what I have configured as of now:

I set the token in a cookie after the user signs in:

def after_set_user cookies['XSRF-TOKEN'] = form_authenticity_token if protect_against_forgery? puts("set_csrf_cookie_for_ng #{form_authenticity_token}") end

and check the token against the request header:

def verified_request? puts("VERIFIED_REQUEST user: #{current_user} request: #{request.headers['X-XSRF-TOKEN']} form_authenticity_token #{form_authenticity_token}") super || form_authenticity_token == request.headers['X-XSRF-TOKEN'] end

I have implemented the rack_cors gem to cater for the OPTIONS requests.

I have:

protect_from_forgery before_filter :authenticate_user!

in my application controller.

I have:

$.ajaxSetup({
  headers: {
    'X-XSRF-TOKEN': $cookies['XSRF-TOKEN'],
    'X-CSRF-Token': $cookies['XSRF-TOKEN']
  }
});

at the top of my Angular scope.

I have this:

delete $http.defaults.headers.common["X-Requested-With"];

in my Angular app.js config.

user237865 user237865 · Accepted Answer · 2014-12-03T09:35:04

Please add the below before doing the upload of the file (in jquery.fileupload.js).

$.ajaxSetup({
   headers: {
       'X-XSRF-TOKEN': $.cookie("XSRF-TOKEN")
   }
});

AngularJS (Blueimp Jquery-file-uploader) with Rails + Devise - Completed 401 Unauthorized

1 Answers