Laravel 10 / Inertia / Vue3（所有 Inertia 请求必须收到有效的 Inertia 响应）

Question

我使用 Laravel 10、Inertia 和 Vue3 开发了一个应用程序。 本地一切正常。我刚刚将应用程序上传到服务器，但链接不起作用。让我更详细地解释一下。如果我点击任何链接，就会出现此错误消息：

所有 Inertia 请求都必须接收有效的 Inertia 响应，但收到的是纯 JSON 响应。

下面我展示了用于在 vue 组件上创建链接的代码以及后端如何交互。在此示例中，我展示了如何访问每个产品的单独页面。

Vue 组件

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

...in template

 <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 ]);
    }

如果我通过简单地包含链接来访问任何链接，它就可以工作。当我点击任何链接时就会出现问题。

如果我复制并粘贴任何这样的链接，它就会起作用。

https://ecommerce.deniswebapp.ch/products/dresses-long-winter-black-35

我提供了该应用程序的链接，以便您可以自己测试。 这是我使用 Inertia 的第一个项目，我不明白问题可能是什么。

这是项目链接

Answer 1

来自服务器的响应不包含

X-Inertia

标头，这是有效的 惯性响应所必需的。

点击链接时执行的 XHR 请求响应中的

Headers

为：

Content-Encoding:
br
Content-Type:
text/html; charset=UTF-8
Date:
Tue, 09 Jan 2024 13:48:17 GMT
Server:
nginx
Vary:
Accept-Encoding

由于 JSON 响应包含页面对象，因此我们可以推断

X-Inertia

响应标头已被 Nginx 删除。

我建议显式配置您的服务器以在来自代理的响应

中包含

X-Inertia标头。

proxy_pass_header X-Inertia;

Answer 2

您需要返回惯性响应，而不是 JSON 响应。

只需像这样更新您的代码即可。

use Inertia\Inertia;

public function show($ref)
{
   $product = new ProductResource(Product::where('ref', $ref)->first());

   return Inertia::render('Admin/Products/Show', [
      'product'=> $product 
   ]);
}