Laravel10+Inertia+Vue3部署后点击Link报错：收到纯JSON而非有效响应

我用Laravel 10、Inertia和Vue3开发了一款应用，本地运行完全正常，但部署到服务器后点击链接出现异常。点击任意Link组件时，会弹出错误提示：“所有Inertia请求必须接收有效的Inertia响应，但收到了纯JSON响应。” 直接复制粘贴链接访问则可正常打开页面。

相关代码示例：
Vue组件：

<script setup>
import {Link} from "@inertiajs/vue3";
</script>

<!-- 模板部分 -->
<h3 class="product-title"> 
  <Link :href="`/products/${product?.slug}`">{{ product?.title }}</Link> 
</h3>

Laravel后端：

public function show($ref)
{
    $product = new ProductResource(Product::where('ref',$ref)->first());
    return inertia('Admin/Products/Show', ['product'=> $product ]);
}

这是我第一个基于Inertia的项目，找不到问题根源。

1. 检查CSRF令牌配置 #

Inertia的Link组件默认会携带XSRF-TOKEN请求头，服务器端需正确处理：

• 确保布局文件中已包含CSRF元标签：

  <meta name="csrf-token" content="{{ csrf_token() }}">
  

• 核对config/session.php里的domain配置，必须和服务器域名完全匹配，避免令牌跨域失效。

2. 验证Inertia中间件顺序 #

打开app/Http/Kernel.php，确认HandleInertiaRequests中间件位于web组内，且顺序在StartSession和VerifyCsrfToken之后：

protected $middlewareGroups = [
    'web' => [
        // ...其他中间件
        \Illuminate\Session\Middleware\StartSession::class,
        \Illuminate\View\Middleware\ShareErrorsFromSession::class,
        \App\Http\Middleware\VerifyCsrfToken::class,
        \App\Http\Middleware\HandleInertiaRequests::class, // 确保位置正确
    ],
];

3. 检查服务器重写规则 #

• Nginx：确保配置了正确的重写规则，让所有请求指向public/index.php：

  location / {
      try_files $uri $uri/ /index.php?$query_string;
  }
  

• Apache：确认public/.htaccess文件已上传到服务器，Laravel默认的.htaccess包含正确的URL重写规则，若缺失需重新添加。

4. 排查响应格式篡改问题 #

部分服务器或第三方扩展可能修改响应头（比如自动格式化JSON、添加压缩），导致Inertia无法识别响应。暂时禁用服务器的JSON格式化、输出缓冲类扩展，测试是否恢复正常。

5. 核对路由参数匹配 #

后端方法接收的参数是$ref，但前端Link使用的是product?.slug，需确认：

• 路由定义中的参数名与后端方法参数一致（比如路由是Route::get('/products/{slug}', ...)，则后端方法参数应改为$slug）
• product.slug的值与数据库中product.ref的值完全匹配，避免因参数不匹配返回错误响应。

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