Inertia JS对接Laravel API：JSON响应兼容与路由替代方案咨询

一、在保留Inertia的同时提供API响应 #

核心思路是根据请求类型返回对应格式的响应，因为Inertia发起的请求会自动携带X-Inertia请求头，后端可通过这个标识区分请求来源：

方案1：单路由内判断请求头 #

在控制器方法中直接判断请求是否来自Inertia，分别返回Inertia渲染结果或JSON响应，同时复用数据处理逻辑：

use App\Http\Resources\PostResource;
use Illuminate\Http\Request;

public function show(Request $request, Post $post)
{
    // 统一处理数据，复用业务逻辑
    $postData = PostResource::make($post)->resolve();

    // 处理Inertia页面请求
    if ($request->header('X-Inertia')) {
        return Inertia::render('Posts/Show', [
            'post' => $postData,
        ]);
    }

    // 处理API请求（React Native或Web端独立API调用）
    return response()->json($postData);
}

方案2：分离路由分组（更清晰） #

将Web路由（Inertia）和API路由分开定义，业务逻辑抽离到私有方法或服务层，避免重复代码：

// routes/web.php - 处理Inertia页面请求
Route::get('/posts/{post}', [PostController::class, 'showForWeb']);

// routes/api.php - 处理多端API请求
Route::get('/posts/{post}', [PostController::class, 'showForApi']);

控制器中复用数据逻辑：

private function getPostData(Post $post)
{
    return PostResource::make($post)->resolve();
}

public function showForWeb(Request $request, Post $post)
{
    return Inertia::render('Posts/Show', [
        'post' => $this->getPostData($post),
    ]);
}

public function showForApi(Request $request, Post $post)
{
    return response()->json($this->getPostData($post));
}

前端调用注意事项 #

Web端Vue应用中，页面导航用Inertia方法（会携带X-Inertia头），获取纯数据用普通HTTP请求（axios/fetch，不带该头）：

// 页面导航：触发Inertia响应
this.$inertia.visit('/posts/1');

// 获取API数据：触发JSON响应
axios.get('/api/posts/1').then(res => {
    // 处理JSON数据
});

二、能否用vue-router替代Inertia路由？ #

可以，但会失去Inertia的核心优势（服务端渲染、路由自动同步、简化前后端交互等），适合完全转向纯SPA开发的场景：

1. 移除Laravel端的Inertia配置（如HandleInertiaRequests中间件）；
2. 在Vue项目中配置vue-router，定义前端路由规则；
3. 所有前端数据请求均调用Laravel的API路由（routes/api.php），后端统一返回JSON响应；
4. Laravel仅作为API服务，不再处理页面渲染逻辑。

如果不是必须放弃Inertia，更推荐保留Inertia并采用上述API兼容方案，兼顾开发效率和多端需求。

内容的提问来源于stack exchange，提问作者MAHA OUEGHLANI