Inertia JS点击Link组件时出现响应错误求助

问题描述 #

点击Inertia Link组件时，偶尔会弹出白色模态框，提示：

All Inertia requests must receive a valid Inertia response, however a plain JSON response was received

模态框内包含登录页的props及组件名JSON信息，刷新页面有时能临时解决该问题。

相关代码 #

Vue3组件代码

<template>
    <Link href="https://example.com/same-path?page=2">Go to page 2</Link>
</template>

<script>
import {Link} from '@inertiajs/inertia-vue3';

export default {
    components: {Link}
}
</script>

App\Http\Kernel.php配置

protected $middlewareGroups = [
    'web' => [
        ... Other middlewares ...
        \App\Http\Middleware\HandleInertiaRequests::class,
    ],
];

控制器代码

public function index()
{
    $runs = App::make(RunRepository::class)->paginate(15);

    return Inertia::render('panel/runs', compact('runs'));
}

可能原因 #

• 会话过期触发认证拦截：用户会话过期后，后端自动重定向到登录页，但Inertia请求期望标准Inertia响应，登录页的响应被识别为普通JSON，触发报错。
• 完整URL导致请求识别异常：Link组件使用带域名的完整URL，Inertia无法正确判定为同域Inertia请求，后续响应处理逻辑混乱。
• 中间件顺序错误：HandleInertiaRequests中间件位置靠前，未等会话、认证等中间件执行完毕就处理响应，导致重定向未被正确转换为Inertia格式。

修复方案 #

1. 改用相对路径 #

Inertia Link组件优先使用相对路径，避免完整URL带来的请求识别问题：

<template>
    <Link href="/same-path?page=2">Go to page 2</Link>
</template>

2. 优化认证过期响应处理 #

在HandleInertiaRequests中间件中，针对Inertia请求的认证过期场景，返回合法的Inertia重定向响应：

// app/Http/Middleware/HandleInertiaRequests.php
public function handle(Request $request, Closure $next)
{
    $response = parent::handle($request, $next);

    // 检测是否是指向登录页的重定向，且为Inertia请求
    if ($response instanceof RedirectResponse && str_contains($response->getTargetUrl(), route('login'))) {
        if ($request->header('X-Inertia')) {
            return Inertia::location(route('login'));
        }
    }

    return $response;
}

3. 调整中间件顺序 #

确保HandleInertiaRequests在web中间件组的最后位置，保证会话、认证等中间件先执行：

// App\Http\Kernel.php
protected $middlewareGroups = [
    'web' => [
        \App\Http\Middleware\EncryptCookies::class,
        \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
        \Illuminate\Session\Middleware\StartSession::class,
        \Illuminate\View\Middleware\ShareErrorsFromSession::class,
        \App\Http\Middleware\VerifyCsrfToken::class,
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
        // 放在最后，确保其他中间件先处理
        \App\Http\Middleware\HandleInertiaRequests::class,
    ],
];

4. 验证路由配置 #

确保分页对应的路由正确注册，能正常接收page参数并返回Inertia响应：

// routes/web.php
Route::get('/same-path', [RunController::class, 'index'])->name('runs.index');

内容的提问来源于stack exchange，提问作者Mohammad Zarifiyan