Laravel+Vue项目POST请求不支持问题及同页展示工单咨询

错误原因 #

你的表单用POST请求提交到/post/create，但当前路由只配置了GET方法访问这个地址，Laravel会严格校验路由的请求方法，所以返回了不支持POST的错误。

解决方案：保留GET路由+新增POST路由 #

你不能直接把现有GET路由改成POST，因为/post/create是用来展示表单页面的（通过浏览器地址栏访问是GET请求），必须保留这个GET路由；同时要新增一条POST路由来处理表单提交，遵循RESTful规范的话，推荐用/post作为提交地址：

1. 修改路由配置

// 展示工单创建表单（GET请求）
Route::get('/post/create', [\App\Http\Controllers\PostController::class, 'create']);
// 处理工单提交（POST请求）
Route::post('/post', [\App\Http\Controllers\PostController::class, 'store']);

2. 编写Controller的store方法
   在PostController里新增store方法，负责保存工单并返回数据：

use Illuminate\Http\Request;
use App\Models\Post;

public function store(Request $request)
{
    // 先验证表单数据（根据你的工单字段添加规则）
    $validatedData = $request->validate([
        'title' => 'required|string|max:255',
        'content' => 'required|string'
        // 其他字段规则
    ]);

    // 创建新工单
    $newPost = Post::create($validatedData);

    // 返回新增的工单数据给Vue（异步提交时用）
    return response()->json([
        'success' => true,
        'post' => $newPost
    ]);
}

3. Vue模板的修改（推荐异步提交）
   因为用的是Vue模板，不推荐原生表单刷新页面的方式，用axios异步提交体验更好，还能直接在同一视图展示新增的工单：

• 首先确保页面有CSRF令牌（如果是Blade渲染Vue的容器页面，添加这个meta标签）：

<meta name="csrf-token" content="{{ csrf_token() }}">

• Vue组件代码示例：

<template>
  <div>
    <!-- 工单创建表单 -->
    <form @submit.prevent="submitPost">
      <input type="text" v-model="form.title" placeholder="工单标题" required>
      <textarea v-model="form.content" placeholder="工单内容" rows="3" required></textarea>
      <button type="submit">提交工单</button>
    </form>

    <!-- 工单列表（同一视图展示） -->
    <div class="post-list" v-if="posts.length > 0">
      <div class="post-item" v-for="post in posts" :key="post.id">
        <h4>{{ post.title }}</h4>
        <p>{{ post.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      form: {
        title: '',
        content: ''
      },
      posts: []
    }
  },
  mounted() {
    // 页面加载时获取现有工单列表
    this.getPosts()
    // 给axios设置CSRF令牌
    axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').content
  },
  methods: {
    async getPosts() {
      // 需要新增一个GET路由获取工单列表：Route::get('/post', [PostController::class, 'index'])
      const res = await axios.get('/post')
      this.posts = res.data
    },
    async submitPost() {
      try {
        const res = await axios.post('/post', this.form)
        // 把新增的工单加到列表最前面
        this.posts.unshift(res.data.post)
        // 重置表单
        this.form = { title: '', content: '' }
      } catch (err) {
        console.error('提交失败:', err)
        alert('工单提交失败，请检查输入')
      }
    }
  }
}
</script>

4. 补充：如果用原生表单提交（刷新页面）
   如果坚持用原生表单提交，需要修改表单的action为/post，同时添加CSRF隐藏字段：

<form action="/post" method="POST">
  <input type="hidden" name="_token" :value="csrfToken">
  <!-- 其他表单字段 -->
  <button type="submit">提交</button>
</form>

然后在Vue的data里添加csrfToken，从meta标签获取：

data() {
  return {
    csrfToken: document.querySelector('meta[name="csrf-token"]').content
  }
}

这种方式下，store方法最后要重定向回/post/create，并通过session传递成功信息：

return redirect()->route('post.create')->with('success', '工单创建成功');

然后在Vue里需要从页面的session中读取这个提示（如果是Blade渲染的话，可以在页面里输出，再让Vue获取），但这种方式需要刷新页面，体验不如异步提交。

关键总结 #

• 不能修改现有GET路由为POST，否则无法访问表单页面
• 必须新增POST路由处理提交，遵循RESTful规范更合理
• Vue模板推荐用异步提交，能无缝在同一视图展示新增工单

内容的提问来源于stack exchange，提问作者Vue-learning