VueJs调用Laravel Api出现Trying to access array offset on value of type null

AI 小北

2026-10-4

问题解决方案

以下是针对该场景的排查和解决方法，按优先级依次尝试：

1. 修正路由配置

Laravel 的 web.php 路由默认携带 CSRF 验证中间件，仅适用于同站页面请求，接口类请求必须放置在 routes/api.php 文件中：

确认你的 /api/user/store 对应路由写在 api.php 内，该文件下的路由默认跳过 CSRF 校验，适配前后端分离的接口调用场景
如果确实需要放在 web.php 中，需要在 app/Http/Middleware/VerifyCsrfToken.php 的 $except 数组中添加该路由地址，跳过CSRF校验

2. 配置axios请求头

添加必要的请求头确保Laravel能正确识别JSON格式的请求参数，你可以在Vue项目的main.js中添加全局配置：

import axios from 'axios'
// 标识为Ajax请求
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
// 指定POST请求参数为JSON格式
axios.defaults.headers.post['Content-Type'] = 'application/json'
// 挂到Vue原型方便全局调用
app.config.globalProperties.$axios = axios

3. 校验后端参数接收逻辑

Laravel 无法通过原生$_POST获取JSON格式的请求参数，必须通过Request对象接收：

// 控制器方法示例
use Illuminate\Http\Request;

public function store(Request $request)
{
    // 可先打印确认参数是否正常传入
    // dd($request->all());
    $validated = $request->validate([
        'name' => 'required|string|max:255',
        'email' => 'required|email|unique:users',
        'password' => 'required|min:6'
    ]);
    // 执行用户创建逻辑
}