Laravel 10中Vue.js+Axios JSON数据无法存入MySQL问题求助

已搭建好可用的联系表单，尝试通过Vue.js + Axios接收数据，能传递JSON数据但无法存入MySQL数据库，怀疑控制器写法及响应部分有问题，附上相关代码与浏览器日志，请求排查错误。

控制器代码（ContactController.php） #

public function saveContact(Request $request) { 
$this->validate($request, [
   'name' => 'required'         
]);

// 原代码是 $contact = new Contact($request->all());
$contact = new Contact(json($request->all()));

// $contact = new Contact($request->all());        
$contact->save();

  return back()->with('success', 'thnak you');
}

路由配置（web.php） #

Route::get('contact-us', [ ContactController::class, 'getContact' ]);
Route::post('contact-us', [ ContactController::class, 'saveContact' ])->name('contact-us');

Vue组件代码（ExampleComponent.vue） #

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">json data return</div>

                    <div class="card-body">
                        <form @submit="saveContact">
                            <strong>name</strong>

                            <input
                                type="text"
                                class="form-control"
                                v-model="name"
                            />
                            {{ name }}

                            <button class="btn btn-success">sent</button>
                        </form>

                        <strong>Output:</strong>
                        <pre>
                        {{ output }}
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    mounted() {
        console.log("Component mounted.");
    },

    data() {
        return {
            name: "",
            description: "",
            output: "",
        };
    },

    methods: {
        saveContact(e) {
            e.preventDefault();

            let currentObj = this;

            axios

                .post("http://127.0.0.1:8000/saveContact", {
                    name: this.name,
                    description: this.description,
                })

                .then(function (response) {
                    currentObj.output = response.data;
                })

                .catch(function (error) {
                    currentObj.output = error;
                });
        },
    },
};
</script>

Blade视图代码（contact-us.blade.php） #

<div id="emailsend">
  <emailsend-component></emailsend-component>
</div>
@vite('resources/js/app.js')

<form method="post" action="{{ route('contact-us') }}" enctype="multipart/form-data">
  {{csrf_field()}}
  <div class="row">

    <div class="col-md-12 center-block">
      <div class="pull-right"><button type="submit" class="btn btn-primary btn-round center-block">submit</button></div>
    </div>

  </div>

</form>

App.js代码 #

import "./bootstrap";
import { createApp } from "vue/dist/vue.esm-bundler.js";

import ExampleComponent from "./ExampleComponent.vue";
const newtest = createApp({});
newtest.component("emailsend-component", ExampleComponent);
newtest.mount("#emailsend");

浏览器日志 #

错误排查与修复方案 #

1. 路由不匹配：Vue中Axios请求的URL是/saveContact，但web.php仅配置了/contact-us的POST路由，导致404错误。

   • 修复：将Axios请求URL改为http://127.0.0.1:8000/contact-us，或在web.php中添加Route::post('saveContact', [ContactController::class, 'saveContact']);。

2. 控制器JSON解析错误：json($request->all())是错误写法，Laravel会自动解析Axios发送的JSON请求，直接用$request->all()即可。

   • 修复：恢复原代码$contact = new Contact($request->all());。

3. CSRF令牌缺失：Axios异步请求未携带CSRF令牌，Laravel会拦截非GET请求的CSRF验证。

   • 修复：在blade视图头部添加meta标签：<meta name="csrf-token" content="{{ csrf_token() }}">，并在Axios请求中设置headers：

     axios.post("http://127.0.0.1:8000/contact-us", {
         name: this.name,
         description: this.description,
     }, {
         headers: {
             'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
         }
     })
     

4. 控制器响应格式错误：return back()->with(...)是视图跳转响应，Axios需要JSON格式返回值。

   • 修复：改为return response()->json(['success' => 'thank you'], 200);。

5. 模型可填充字段未配置：确保Contact模型设置了批量赋值允许字段：

   class Contact extends Model
   {
       protected $fillable = ['name', 'description'];
   }
   

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