React+Laravel9中Axios传递CSRF Token报419错误的解决咨询

出现419错误通常是因为CSRF Token验证失败，即使你已经获取并传递了Token，以下是几个关键修复点：

1. 修正请求URL和Content-Type #

你的当前代码存在两个小问题：

• 请求URL使用相对路径logout，如果当前页面是嵌套路由（如/dashboard），会导致请求发送到/dashboard/logout，而非正确的根路径/logout。
• Content-Type设置为text/json，正确的JSON请求类型应为application/json。

修改后的代码：

const handleLogout = (e) => {
  e.preventDefault();
  const token = document.head.querySelector('meta[name="csrf-token"]').getAttribute('content');
  axios.post('/logout', {}, {
    headers: {
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': token
    }
  });
};

注：登出请求不需要额外传递name参数，可直接传空对象。

2. 使用Breeze/Inertia预配置的Axios实例 #

Laravel Breeze + Inertia的React模板已经帮你配置好了带有CSRF Token的Axios实例，无需手动添加Token。

首先确保你导入的是项目中预配置的Axios（通常在resources/js/axios.js）：

import axios from './axios'; // 根据实际路径调整

然后简化登出逻辑：

const handleLogout = (e) => {
  e.preventDefault();
  axios.post('/logout');
};

这个实例会自动从meta标签获取CSRF Token并添加到请求头，同时设置正确的请求类型。

3. 直接使用Inertia的post方法（推荐） #

在Inertia应用中，更推荐使用Inertia自带的请求方法，它会自动处理CSRF Token和路由匹配：

import { Inertia } from '@inertiajs/inertia';

const handleLogout = (e) => {
  e.preventDefault();
  Inertia.post('/logout');
};

额外检查 #

• 确认meta标签确实在HTML的<head>区域，且content属性正确渲染了Token（你已经通过控制台验证过，这一步没问题）。
• 确认routes/web.php中存在正确的登出路由（Breeze默认已经配置）：

Route::post('/logout', [AuthenticatedSessionController::class, 'destroy'])
  ->middleware('auth')
  ->name('logout');

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