Vue+Capacitor+Laravel Sanctum登出报401 Unauthorized问题

我是Vue.js新手，已经花了一周时间排查登出功能的问题：用Postman调用Laravel Sanctum的/api/logout接口完全正常，但前端点击登出按钮后，只有前端会话退出，控制台报错POST http://127.0.0.1:8000/api/logout 401 (Unauthorized)，数据库里的token也没被删除。

我试过以下几种解决方案，但都没解决问题：

• 把Axios换成Fetch调用，出现405 Method Not Allowed错误，且前端会话也没退出；
• 将请求方法从POST改成DELETE，前后端都修改后还是报401，依旧只有前端会话退出，后端token未被删除；
• 打印token确认和生成时的一致。

相关代码 #

前端 useApi.js 登出方法

export const useApi = () => {
  const logout = async () => {
    try {
      await axios.post('/api/logout');
      // 前端会话清理逻辑
      localStorage.removeItem('token');
    } catch (error) {
      console.error(error);
    }
  };

  return { logout };
};

前端 MyAccount.vue 触发逻辑

<template>
  <button @click="handleLogout">登出</button>
</template>

<script setup>
import { useApi } from './useApi';
const { logout } = useApi();

const handleLogout = async () => {
  await logout();
  window.location.href = '/login';
};
</script>

后端 AuthController logout 方法

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class AuthController extends Controller
{
    public function logout(Request $request)
    {
        Auth::user()->tokens()->delete();
        return response()->json(['message' => '登出成功'], 200);
    }
}

后端 api.php 路由配置

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AuthController;

Route::middleware('auth:sanctum')->post('/logout', [AuthController::class, 'logout']);

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