Laravel Precognition通过前端发送带X-Precognition头的请求，使后端仅执行验证规则并返回结果，实现表单实时校验。1. 它是一种设计模式或扩展库技术，核心是在用户填写时预验证。2. 前端设置X-Precognition: true和Content-Type: application/json，后端检测到该头则跳过业务逻辑，仅运行Form Request验证，如检查邮箱唯一性。3. 使用Axios在input或blur事件发送请求，根据422响应动态显示错误提示。4. 默认需手动处理中间件判断header并返回204，也可用mews/precognition包自动拦截。最终实现前后端共用验证逻辑，提升体验。

Laravel Precognition 是一个让前端能在用户提交表单前就进行实时验证的解决方案。它通过预判（Precognition）请求模拟 Laravel 后端验证逻辑，提前返回错误信息，从而实现无缝的实时表单校验体验。

1. 什么是 Laravel Precognition

Precognition 并非 Laravel 核心功能，而是一种设计模式或可通过扩展库实现的技术。它的核心思想是：在用户填写表单时，前端发送带有特殊 header 的请求到后端，Laravel 接收到后不执行实际逻辑（如存储数据），只运行验证规则，并返回验证结果。

这种方式让你可以在不提交表单的情况下，实时提示用户输入是否符合要求，比如邮箱格式、密码强度、字段唯一性等。

2. 实现原理与关键 Header

要启用 Precognition 验证，前端请求中需要添加特定的 header：

• X-Precognition: 设为 true，告诉 Laravel 这是一个预验证请求
• Content-Type: application/json

当 Laravel 检测到 X-Precognition: true 时，会跳过控制器中的业务逻辑（如创建用户），仅执行 Form Request 中的验证规则，并返回 204 No Content 或 422 Unprocessable Entity 响应。

例如，你有一个 StoreUserRequest：

class StoreUserRequest extends FormRequest
{
    public function rules()
    {
        return [
            'email' => 'required|email|unique:users',
            'password' => 'required|min:8'
        ];
    }
}

前端在用户输入 email 时立即发送带 X-Precognition 的请求，后端就会检查 email 是否合法和唯一，但不会真正创建用户。

3. 前端如何集成

使用 Axios 或 Fetch 发送请求时设置 header：

axios.post('/api/register', { email, password }, {
  headers: {
    'X-Precognition': 'true'
  }
})
.then(() => {
  // 无错误，可继续
})
.catch(error => {
  // error.response.data.errors 包含验证错误信息
});

你可以绑定在 input 的 blur 或 input 事件上，实现输入即校验的效果。

配合 Vue、React 等框架，很容易做到动态显示错误提示：

• 用户离开邮箱输入框 → 发起 Precognition 请求
• 后端返回 email 已存在 → 前端显示“该邮箱已被注册”

4. 后端支持与中间件处理

Laravel 默认不处理 Precognition，需自行判断 header 并中断后续逻辑。可在中间件或基类控制器中处理：

if ($request->header('X-Precognition')) {
    return response()->noContent();
}

这样一旦验证通过，直接返回 204，避免执行后面的存储操作。

也可以使用社区包如 mews/precognition 来简化集成：

该包自动识别 X-Precognition 请求并拦截，无需手动写判断逻辑。

基本上就这些。Laravel Precognition 实时验证的关键在于“预请求 + 特殊 header + 验证规则复用”，让前后端共用同一套验证逻辑，减少重复代码，提升用户体验。