错误 422 无法处理的实体 - Rails API VueJS 来自答案

【问题标题】：Error 422 Unprocessable Entity - Rails API VueJS From错误 422 无法处理的实体 - Rails API VueJS 来自
【发布时间】：2019-07-11 06:47:17
【问题描述】：

我正在尝试通过 vuejs 表单创建一个新的user。我在后端使用 Rails API。

我正在使用 gem knock 和 gem bcrypt 进行 JWT 授权。

当我提交表单时，我在终端中收到 422 错误。我注意到它看起来像是在尝试将其处理为 HTML，而不是 json。

Started POST "/api/v1/users" for 127.0.0.1 at 2019-02-17 21:18:05 +0000
Processing by Api::V1::UsersController#create as HTML
  Parameters: {"email"=>"ui@gmail.com", "password"=>"[FILTERED]", "user"=>{"email"=>"ui@gmail.com"}}
Completed 422 Unprocessable Entity in 10ms (Views: 0.9ms | ActiveRecord: 0.0ms | Allocations: 576)

在使用 Insomnia 时，我能够完美地创建新用户，这导致我专注于前端问题。

此外，当我从 user 模型中删除 has_secure_password 时，表单提交成功 200，尽管没有密码。

那么为什么密码会出现在这里？

createuser.vue

<template>
  <div class="card-container">
    <div class="signup">
      <form @submit.stop.prevent="newUser">
        <input id="email" v-model="email" type ="text" name="email" class="input">
        <input id="password" v-model="password" type="password" name="password" class="input">
        <input type="submit" value="Submit" class="btn-update">
      </form>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
      return {
          email: '',
          password: '',
          errors: []
      }
  },

  methods: {

  newUser() {
    axios.post('http://localhost:3001/api/v1/users', {
        email: this.email,
        password: this.password
      })
      .then(res => (this.user = res.data))
      .catch((error) => {
        console.log(error)
      });
  },
  }
};

</script>
<style>

</style>

routes.rb

Rails.application.routes.draw do

  namespace :api do
    namespace :v1 do
      post 'user_token' => 'user_token#create'
      resources :users
      resources :posts
      #post   '/users/create'   => 'users#create' not making a difference
      #get    '/users/current'  => 'users#current'
    end
   end
end

users_controller.rb

class Api::V1::UsersController < ApplicationController
    before_action :authenticate_user,  only: [:index, :current, :update]

    def index 
        render json: User.all, status: 200
    end

    # Call this method to check if the user is logged-in.
    # If the user is logged-in we will return the user's information.
    def current
        current_user.update!(last_login: Time.now)
        render json: current_user
    end

    #def show
    #   @user = User.find(params[:id])
    #
    #    render json: User.find(params[:id]), status: 200
    #end

    def create
        user = User.new(user_params)

        if user.save
            render json: user, status: :created, location: user
        else
            render json: user.errors, status: :unprocessable_entity
        end
    end

    def update
        if @user.update(user_params)
          render :show, status: :ok, location: @user
        else
          render json: @user.errors, status: :unprocessable_entity
        end
    end

    def destroy
        @user.destroy
    end

private
    def set_user
        @user = User.find(params[:id])
    end

    def user_params
        params.require(:user).permit(:email, :password, :avatar)
    end
end

更新

我已向 API 命名空间添加了一个默认选项。 namespace :api, defaults: {format: :json}

这已将处理“更正”为 JSON：

Processing by Api::V1::UsersController#create as JSON

但我仍然得到 422 代码。

【问题讨论】：

您正在浏览器上记录错误响应，在 axios carch 中。根据您的创建方法，您应该在 response.data 中查找错误报告。

标签： ruby-on-rails vue.js jwt

【解决方案1】：

您需要将帖子数据包装在user对象中

{
  "user":
  {
    "email": "user@example.com",
    "password": "password"
  }
}

您可以更改您的请求

axios.post('http://localhost:3001/api/v1/users', {
    user: {
      email: this.email,
      password: this.password
    }
  })
  .then(res => (this.user = res.data))
  .catch((error) => {
    console.log(error)
  });

【讨论】：