CODEWITHSUNDEEP
laravelvuejs3inertiajs
Daniel
Daniel

Reputation: 25

Laravel 10 / Inertia / Vue3 (All Inertia requests must receive a valid Inertia response)

I have developed an application using laravel 10, inertia and vue3. Everything works fine locally. I have just uploaded the application to the server, but the links do not work. Let me explain in more detail. If I click on any link, this error message appears:

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

Below I show the code used to create the links on the vue components and how the backend interacts. In this example I show how I access an individual page of each product.

Vue component

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

If I access any link by simply including the link, it works. The problem appears when I click on any link.

If I copy and pase any link like this it works.

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

I am including the link to the application so you can test it yourself. This is my first project with Inertia and I cannot understand what the problem might be.

This is the projec link

Upvotes: 0

Views: 1803

Answers (2)

Tarun Korat
Tarun Korat

Reputation: 11

You need to return an inertia response, not a JSON response.

Just Update your code like this.

use Inertia\Inertia;

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

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

Upvotes: 0

Oluwafemi Sule
Oluwafemi Sule

Reputation: 38982

The response from the server doesn't include the X-Inertia header which is necessary for a valid Inertia response.

The Headers in the response to the XHR request performed when the link is clicked are:

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

Since the JSON response contains the page object, we can infer that the X-Inertia response header is dropped by Nginx.

I recommend explicitly configuring your server to include the X-Inertia header in the response from the proxy.

proxy_pass_header X-Inertia;

Upvotes: 2

Related Questions