1

I am trying to match a song (in BBone world) through Rails to the DB. I continually am getting a POST http://localhost:3000/songs 401 (Unauthorized) when trying to save in the BBone View. The rails console error is below. It appears that the parameter sent to Rails is duplicated in fields (data removed is below the Rails error, so to see to nesting), but would this prevent the data from getting saved, rather would it produce this error, as opposed to something more along the lines of 'too many fields'.

As far as being unauthorized, that doesn't make sense, since the user ID is getting populated. Any thoughts?

using gem 'rails-backbone'

Backbone Model:

//filename: song.js
define([
  'underscore',
  'backbone',
  'backbone/collections/components'
], function(_, Backbone, componentCollection) {
  var songModel = Backbone.Model.extend({
    paramRoot: 'song',
    defaults: {
      title: '',
      content: '',
      user: '',
      components: componentCollection
    },
    initialize: function(){
    }
  });

  return songModel;
});

Backbone View:

// Filename: views/songs/new_view
define([
  'jquery',
  'underscore',
  'backbone',
  // Pull in the Collection module from above
  'backbone/collections/songsCollection',
  // 'backbone/views/songs/a_song_view',
  'text!backbone/templates/songs/new.html',
  'app/dispatch',
  'app/state'
], function($, _, Backbone, SongsCollection, songsTemplate, dispatch, state){
  return Backbone.View.extend({
el: $('#songs'),

initialize: function(options){
  //......
},

save: function(e){
  e.preventDefault();
  e.stopPropagation();
  var JSONSong = JSON.stringify(this.model.toJSON());
  this.model.unset("errors");
  this.model.set({
    title: $('#title').val(),
    content: JSONSong,
    user: $('#user').val()
  });
  return this.collection.create(this.model.toJSON(), {
    success: function(song) {
      console.log('saved!');
      this.model = song;
      return window.location.hash = "/" + this.model.id;
    },
    error: function(song, jqXHR) {
      return this.model.set({
        errors: $.parseJSON(jqXHR.responseText)
      });
    }
  });
},

render: function(){
  $(this.el).html('');
  var compiledTemplate = _.template ( songsTemplate, this.model.toJSON());
  $(this.el).html(compiledTemplate);
  return this;
},
});
});

Rails Schema:

ActiveRecord::Schema.define(:version => 20130222200403) do


  create_table "songs", :force => true do |t|
    t.string   "title"
    t.string   "content"
    t.datetime "created_at", :null => false
    t.datetime "updated_at", :null => false
    t.integer  "user_id"
  end

  create_table "users", :force => true do |t|
    t.string   "email",                  :default => "", :null => false
    t.string   "encrypted_password",     :default => "", :null => false
    t.string   "reset_password_token"
    t.datetime "reset_password_sent_at"
    t.datetime "remember_created_at"
    t.integer  "sign_in_count",          :default => 0
    t.datetime "current_sign_in_at"
    t.datetime "last_sign_in_at"
    t.string   "current_sign_in_ip"
    t.string   "last_sign_in_ip"
  end

  add_index "users", ["email"], :name => "index_users_on_email", :unique => true
  add_index "users", ["reset_password_token"], :name => "index_users_on_reset_password_token", :unique => true

end

Rails Console error:

Started POST "/songs" for 127.0.0.1 at 2013-02-25 16:45:56 -0500
Processing by SongsController#create as JSON
  Parameters: {"title"=>"1234", "content"=>"{\"title\":\"1234\",\"content\":\"{\\\"title\\\":\\\"\\\",\\\"content\\\":\\\"\\\",\\\"user\\\":\\\"\\\",\\\"components\\\":[{\\\"label\\\":\\\"Snare\\\",\\\"img\\\":\\\"snare.png\\\",\\\"mute\\\":false,\\\"sample\\\":\\\"808_sd.m4a\\\",\\\"measures\\\":[{\\\"label\\\":\\\"0/4\\\",\\\"beats\\\":[{\\\"selected\\\":false},{\\\"selected\\\":false},{\\\"selected\\\":false},{\\\"selected\\\":false}],\\\"numberOfBeats\\\":0,\\\"divisions\\\":8}],\\\"active\\\":true,\\\"signature\\\":4,\\\"representation\\\":\\\"fraction\\\"},{\\\"label\\\":\\\"Hi Hat\\\",\\\"img\\\":\\\"hihat.png\\\",\\\"mute\\\":true,\\\"sample\\\":\\\"808_chh.m4a\\\",\\\"measures\\\":[{\\\"label\\\":\\\"0/4\\\",\\\"beats\\\":[{\\\"selected\\\":false},{\\\"selected\\\":false},{\\\"selected\\\":false},{\\\"selected\\\":false}],\\\"numberOfBeats\\\":0,\\\"divisions\\\":8}],\\\"active\\\":true,\\\"signature\\\":4,\\\"representation\\\":\\\"fraction\\\"},{\\\"label\\\":\\\"Kick Drum\\\",\\\"img\\\":\\\"kick.png\\\",\\\"mute\\\":true,\\\"sample\\\":\\\"808_bd.m4a\\\",\\\"measures\\\":[{\\\"label\\\":\\\"0/4\\\",\\\"beats\\\":[{\\\"selected\\\":false},{\\\"selected\\\":false},{\\\"selected\\\":false},{\\\"selected\\\":false}],\\\"numberOfBeats\\\":0,\\\"divisions\\\":8}],\\\"active\\\":false,\\\"signature\\\":4,\\\"representation\\\":\\\"fraction\\\"},{\\\"label\\\":\\\"Synth\\\",\\\"img\\\":\\\"synth.png\\\",\\\"mute\\\":true,\\\"sample\\\":\\\"ambass.mp3\\\",\\\"measures\\\":[{\\\"label\\\":\\\"0/4\\\",\\\"beats\\\":[{\\\"selected\\\":false},{\\\"selected\\\":false},{\\\"selected\\\":false},{\\\"selected\\\":false}],\\\"numberOfBeats\\\":0,\\\"divisions\\\":8}],\\\"active\\\":true,\\\"signature\\\":4,\\\"representation\\\":\\\"fraction\\\"}]}\",\"user\":\"1\",\"components\":[{\"label\":\"Snare\",\"img\":\"snare.png\",\"mute\":false,\"sample\":\"808_sd.m4a\",\"measures\":[{\"label\":\"0/4\",\"beats\":[{\"selected\":false},{\"selected\":false},{\"selected\":false},{\"selected\":false}],\"numberOfBeats\":0,\"divisions\":8}],\"active\":true,\"signature\":4,\"representation\":\"fraction\"},{\"label\":\"Hi Hat\",\"img\":\"hihat.png\",\"mute\":true,\"sample\":\"808_chh.m4a\",\"measures\":[{\"label\":\"0/4\",\"beats\":[{\"selected\":false},{\"selected\":false},{\"selected\":false},{\"selected\":false}],\"numberOfBeats\":0,\"divisions\":8}],\"active\":true,\"signature\":4,\"representation\":\"fraction\"},{\"label\":\"Kick Drum\",\"img\":\"kick.png\",\"mute\":true,\"sample\":\"808_bd.m4a\",\"measures\":[{\"label\":\"0/4\",\"beats\":[{\"selected\":false},{\"selected\":false},{\"selected\":false},{\"selected\":false}],\"numberOfBeats\":0,\"divisions\":8}],\"active\":false,\"signature\":4,\"representation\":\"fraction\"},{\"label\":\"Synth\",\"img\":\"synth.png\",\"mute\":true,\"sample\":\"ambass.mp3\",\"measures\":[{\"label\":\"0/4\",\"beats\":[{\"selected\":false},{\"selected\":false},{\"selected\":false},{\"selected\":false}],\"numberOfBeats\":0,\"divisions\":8}],\"active\":true,\"signature\":4,\"representation\":\"fraction\"}]}", "user"=>"1", "components"=>[{"label"=>"Snare", "img"=>"snare.png", "mute"=>false, "sample"=>"808_sd.m4a", "measures"=>[{"label"=>"0/4", "beats"=>[{"selected"=>false}, {"selected"=>false}, {"selected"=>false}, {"selected"=>false}], "numberOfBeats"=>0, "divisions"=>8}], "active"=>true, "signature"=>4, "representation"=>"fraction"}, {"label"=>"Hi Hat", "img"=>"hihat.png", "mute"=>true, "sample"=>"808_chh.m4a", "measures"=>[{"label"=>"0/4", "beats"=>[{"selected"=>false}, {"selected"=>false}, {"selected"=>false}, {"selected"=>false}], "numberOfBeats"=>0, "divisions"=>8}], "active"=>true, "signature"=>4, "representation"=>"fraction"}, {"label"=>"Kick Drum", "img"=>"kick.png", "mute"=>true, "sample"=>"808_bd.m4a", "measures"=>[{"label"=>"0/4", "beats"=>[{"selected"=>false}, {"selected"=>false}, {"selected"=>false}, {"selected"=>false}], "numberOfBeats"=>0, "divisions"=>8}], "active"=>false, "signature"=>4, "representation"=>"fraction"}, {"label"=>"Synth", "img"=>"synth.png", "mute"=>true, "sample"=>"ambass.mp3", "measures"=>[{"label"=>"0/4", "beats"=>[{"selected"=>false}, {"selected"=>false}, {"selected"=>false}, {"selected"=>false}], "numberOfBeats"=>0, "divisions"=>8}], "active"=>true, "signature"=>4, "representation"=>"fraction"}], "song"=>{"title"=>"1234", "content"=>"{\"title\":\"1234\",\"content\":\"{\\\"title\\\":\\\"\\\",\\\"content\\\":\\\"\\\",\\\"user\\\":\\\"\\\",\\\"components\\\":[{\\\"label\\\":\\\"Snare\\\",\\\"img\\\":\\\"snare.png\\\",\\\"mute\\\":false,\\\"sample\\\":\\\"808_sd.m4a\\\",\\\"measures\\\":[{\\\"label\\\":\\\"0/4\\\",\\\"beats\\\":[{\\\"selected\\\":false},{\\\"selected\\\":false},{\\\"selected\\\":false},{\\\"selected\\\":false}],\\\"numberOfBeats\\\":0,\\\"divisions\\\":8}],\\\"active\\\":true,\\\"signature\\\":4,\\\"representation\\\":\\\"fraction\\\"},{\\\"label\\\":\\\"Hi Hat\\\",\\\"img\\\":\\\"hihat.png\\\",\\\"mute\\\":true,\\\"sample\\\":\\\"808_chh.m4a\\\",\\\"measures\\\":[{\\\"label\\\":\\\"0/4\\\",\\\"beats\\\":[{\\\"selected\\\":false},{\\\"selected\\\":false},{\\\"selected\\\":false},{\\\"selected\\\":false}],\\\"numberOfBeats\\\":0,\\\"divisions\\\":8}],\\\"active\\\":true,\\\"signature\\\":4,\\\"representation\\\":\\\"fraction\\\"},{\\\"label\\\":\\\"Kick Drum\\\",\\\"img\\\":\\\"kick.png\\\",\\\"mute\\\":true,\\\"sample\\\":\\\"808_bd.m4a\\\",\\\"measures\\\":[{\\\"label\\\":\\\"0/4\\\",\\\"beats\\\":[{\\\"selected\\\":false},{\\\"selected\\\":false},{\\\"selected\\\":false},{\\\"selected\\\":false}],\\\"numberOfBeats\\\":0,\\\"divisions\\\":8}],\\\"active\\\":false,\\\"signature\\\":4,\\\"representation\\\":\\\"fraction\\\"},{\\\"label\\\":\\\"Synth\\\",\\\"img\\\":\\\"synth.png\\\",\\\"mute\\\":true,\\\"sample\\\":\\\"ambass.mp3\\\",\\\"measures\\\":[{\\\"label\\\":\\\"0/4\\\",\\\"beats\\\":[{\\\"selected\\\":false},{\\\"selected\\\":false},{\\\"selected\\\":false},{\\\"selected\\\":false}],\\\"numberOfBeats\\\":0,\\\"divisions\\\":8}],\\\"active\\\":true,\\\"signature\\\":4,\\\"representation\\\":\\\"fraction\\\"}]}\",\"user\":\"1\",\"components\":[{\"label\":\"Snare\",\"img\":\"snare.png\",\"mute\":false,\"sample\":\"808_sd.m4a\",\"measures\":[{\"label\":\"0/4\",\"beats\":[{\"selected\":false},{\"selected\":false},{\"selected\":false},{\"selected\":false}],\"numberOfBeats\":0,\"divisions\":8}],\"active\":true,\"signature\":4,\"representation\":\"fraction\"},{\"label\":\"Hi Hat\",\"img\":\"hihat.png\",\"mute\":true,\"sample\":\"808_chh.m4a\",\"measures\":[{\"label\":\"0/4\",\"beats\":[{\"selected\":false},{\"selected\":false},{\"selected\":false},{\"selected\":false}],\"numberOfBeats\":0,\"divisions\":8}],\"active\":true,\"signature\":4,\"representation\":\"fraction\"},{\"label\":\"Kick Drum\",\"img\":\"kick.png\",\"mute\":true,\"sample\":\"808_bd.m4a\",\"measures\":[{\"label\":\"0/4\",\"beats\":[{\"selected\":false},{\"selected\":false},{\"selected\":false},{\"selected\":false}],\"numberOfBeats\":0,\"divisions\":8}],\"active\":false,\"signature\":4,\"representation\":\"fraction\"},{\"label\":\"Synth\",\"img\":\"synth.png\",\"mute\":true,\"sample\":\"ambass.mp3\",\"measures\":[{\"label\":\"0/4\",\"beats\":[{\"selected\":false},{\"selected\":false},{\"selected\":false},{\"selected\":false}],\"numberOfBeats\":0,\"divisions\":8}],\"active\":true,\"signature\":4,\"representation\":\"fraction\"}]}"}}
WARNING: Can't verify CSRF token authenticity
Completed 401 Unauthorized in 1ms

Parameter with all the content removed:

Parameters: {"title"=>"1234", "content"=>"{\"title\":\"1234\",\"content\":\"{}", "user"=>"1", "components"=>[], "song"=>{"title"=>"1234", "content"=>"{}"}}
chris Frisina
  • 19,086
  • 22
  • 87
  • 167

2 Answers2

1

I attached the CSRF param and token to the model to send to the database.

  //To pass the variable safely in from BBone to Rails 3.2, you have to include the csrf param and token
  toBeSavedSong.set($("meta[name=csrf-param]").attr('content'), $("meta[name=csrf-token]").attr('content'));
chris Frisina
  • 19,086
  • 22
  • 87
  • 167
0

The CSRF token should be included in the ajax request to have this successful.

Solutions for you:

Make sure your page has CSRF token in the "" section. If not, it could be because you miss a tag in your application.html.erb layout file. There should be "<%= csrf_meta_tags %>" in the layout

<!DOCTYPE html>
<html>
<head>
  <title>Site name</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

Check your jQuery(or other library used by backbone). Make sure it is updated. I believe jQuery should include CSRF token in Ajax request

If both don't work for you, you can disable CSRF token check(which has CSRF security issue if you are doing a public website). Disable it by delete this line in apps/controller/application_controller.rb

protect_from_forgery
Zhongjie Wu
  • 307
  • 3
  • 12
  • the `<%= csrf_meta_tags %>` is included in the application.html.erb, and it is a public site, so I cannot delete the protect_from_forgery..... all gems are up to date – chris Frisina Feb 26 '13 at 14:41
  • You can refer to https://gist.github.com/gcollazo/1240683 to override the backbone js sync call to include the CSRF token in the AJAX call header – Zhongjie Wu Feb 27 '13 at 06:01