Ajax问题使我的联接表的发布请求已满

Question

To the point: 422 error making a post request for my join table using ajax on the front end.

I'm creating an app for a fullstack project using rails (as my api) and ajax to make my api request to my routes. I have three tables on my back end (users: :email, :token, :password_digest),(fantasy_players: :player_id, :user_id, :target), and (players: :name, :team, :bye)

On my front end i can make a successful post to my players table and my curl requests to my back end seem to work fine for my fantasy_players table. I'm receiving a 422 unprocessable entity, the server code reads as follows :

Started POST "/fantasy_players" for 127.0.0.1 at 2017-12-02 19:29:38 -0500
Processing by FantasyPlayersController#create as */*
  Parameters: {"submit"=>"Add To My Players", "player"=>{"id"=>"1"}, "fantasy_player"=>{"target"=>"yes"}}
  User Load (0.2ms)  SELECT  "users".* FROM "users" WHERE "users"."token" = $1 LIMIT $2  [["token", "92ed3b66f0608a14b0225cad5a362027"], ["LIMIT", 1]]
   (0.2ms)  BEGIN
   (0.2ms)  ROLLBACK
[active_model_serializers] Rendered ActiveModel::Serializer::Null with ActiveModel::Errors (0.41ms)
Completed 422 Unprocessable Entity in 8ms (Views: 2.7ms | ActiveRecord: 0.6ms)

front end events:

    const onAddUserPlayer = function (event) {
      event.preventDefault()
      const data = getFormFields(this)
      console.log(data)
      api.addUserPlayer(data)
        .then(ui.addUserPlayerSuccess)
        .catch(ui.addUserPlayerFailure)
    }

api call

    const addUserPlayer = function (data) {
      return $.ajax({
      url: config.apiOrigin + '/fantasy_players',
      method: 'POST',
      headers: {
        Authorization: 'Token token=' + store.user.token
        },
        data
      })
    }

Answer 1

I think it's CSRF issue.

The layout which is rendering this corresponding view, should contain this:

<%= csrf_meta_tag %>

And it adds CSRF token to your view header, so you can get it easily from frontend using something like: $('meta[name="csrf-token"]').attr('content') .

In your case try to add beforeSend to you ajax request. Maybe something like:

beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},

Cheers!