Angular + Rails: POST request 422/CSRF error

Question

I keep getting:

Can't verify CSRF token authenticity Completed 422 Unprocessable Entity in 2ms (ActiveRecord: 0.0ms)

I am trying to make an $http request to post a new db entry. Using Angular over RoR.

inside my Angular controller:

...
$scope.createArea = function(data){
  var areaData = $scope.areaData;
  var url = '/locations/' + locationService.id + '/floors/' + floorService.id + '/areas.json'
  $http({
    url: url,
    method: 'POST',
    contentType: "application/json",
    data: areaData
  });
};

my form:

<div class="form-horizontal" id="new-area" ng-controller="mapsController">
  <form ng-submit="createArea(areaData)">
    <div id="name-group" class="form-group">
      <label>Name</label>
      <input type="text" name="name" class="form-control" placeholder="Area Name" ng-model="areaData.name" /><br />

      <label>Group</label>
      <select class="form-control">
        <option ng-repeat="group in groups" value="{{group.id}}" ng-model="areaData.groupID">{{group.name}}</option>
      </select>
    </div>

    <button type="submit" class="btn btn-default">Create</button>
  </form>
</div>

in my rails controller:

def create
    respond_to do |format|
      format.json
    end
end

Usually you would need an interceptor to create some type of JWT before you send requests to your rails endpoint. Is this an existing application or a new application. — ruby_newbie
Existing. Just moving some of the functionality to Angular. I have made requests before with no issue, but through jQuery instead of Angular. — Shelby S
I think this post elaborates a bit more on it: stackoverflow.com/questions/14734243/…. — ruby_newbie

Shelby S Shelby S · Accepted Answer · 2016-06-21T16:34:34

Found the answer: added gem 'angular_rails_csrf' to my gemfile. Docs: https://github.com/jsanders/angular_rails_csrf

Angular + Rails: POST request 422/CSRF error

1 Answers