Postman调用Rails 7 API正常，Vue POST请求返回422错误

核心原因分析 #

Postman请求正常但Vue提交失败，本质是请求参数格式不匹配Rails强参数要求或请求头配置错误，导致Rails无法解析并获取有效参数。

分步解决方案 #

1. 确保参数嵌套在模型命名空间下 #

Rails的强参数默认要求参数嵌套在模型名对应的键下（比如user:），如果Vue发送平级参数，Rails会找不到核心参数集。

修改Vuex的register动作

将请求数据包裹在user键内：

// store/actions.js
async register({ commit }, userData) {
  try {
    const response = await axios.post('/api/users', {
      user: {
        email: userData.email,
        password: userData.password,
        password_confirmation: userData.passwordConfirmation
      }
    })
    // 后续登录/状态更新逻辑
  } catch (error) {
    console.error(error.response.data)
  }
}

验证表单组件传参

确保表单组件传递给Vuex的字段完整：

<!-- Register.vue -->
<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.email" type="email" placeholder="邮箱">
    <input v-model="form.password" type="password" placeholder="密码">
    <input v-model="form.passwordConfirmation" type="password" placeholder="确认密码">
    <button type="submit">注册</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: { email: '', password: '', passwordConfirmation: '' }
    }
  },
  methods: {
    async handleSubmit() {
      await this.$store.dispatch('register', this.form)
    }
  }
}
</script>

2. 确认axios请求头配置正确 #

Rails API默认解析JSON格式参数，需确保axios发送正确的Content-Type：

// axios全局配置文件
import axios from 'axios'

axios.defaults.baseURL = 'http://你的RailsAPI地址'
axios.defaults.headers.common['Content-Type'] = 'application/json'

// 若Rails开启了CSRF保护（API模式默认关闭，若手动开启需添加）
// axios.defaults.headers.common['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').content

export default axios

3. 验证Rails强参数配置 #

确保Rails控制器的强参数正确接收嵌套的user参数：

# app/controllers/api/users_controller.rb
class Api::UsersController < ApplicationController
  def create
    @user = User.new(user_params)
    if @user.save
      render json: @user, status: :created
    else
      render json: @user.errors, status: :unprocessable_entity
    end
  end

  private

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

验证修改效果 #

修改后查看Rails日志，正常的请求参数日志应为：

Started POST "/api/users" for ::1 at 2024-05-20 12:00:00 +0800
Processing by Api::UsersController#create as JSON
  Parameters: {"user"=>{"email"=>"test@example.com", "password"=>"[FILTERED]", "password_confirmation"=>"[FILTERED]"}}

若仍有问题，可通过浏览器开发者工具的Network标签，查看请求的Request Payload是否为正确嵌套的JSON格式。

内容的提问来源于stack exchange，提问作者user2799827